头部效果修改

whyczyk

2021-07-31 04c2eb1db65b16f8d1b5c6a3b1eda6bb843f2bc3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template>
    <div class="external_circle">
        <div class="inner_circle">
            <slot></slot>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
 
            }
        },
    }
</script>
 
<style scoped>
    .external_circle,
    .inner_circle {
        background: #ffe229;
        background: -moz-linear-gradient(top, #ffe229 0%, #ff3829 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffe229), color-stop(100%, #ff3829));
        background: -webkit-linear-gradient(top, #ffe229 0%, #ff3829 100%);
        background: -o-linear-gradient(top, #ffe229 0%, #ff3829 100%);
        background: -ms-linear-gradient(top, #ffe229 0%, #ff3829 100%);
        background: linear-gradient(to bottom, #ffe229 0%, #ff3829 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffe229', endColorstr='#ff3829', GradientType=0);
    }
 
    .inner_circle {
        background: #2c3377;
        border: 1px solid #1a227e;
    }
 
    .external_circle {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.59846, M12=-0.80115, M21=-0.80115, M22=-0.59846);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.59846, M12=--0.80115, M21=-0.80115, M22=-0.59846)";
        zoom: 1;
        width: 110px;
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .inner_circle {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.59846, M12=-0.80115, M21=0.80115, M22=-0.59846);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.59846, M12=-0.80115, M21=0.80115, M22=-0.59846)";
        zoom: 1;
        width: 90px;
        height: 90px;
    }
</style>