Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
5cd0a576 by simon
Options

no message

1 parent 6a3e36f8
Inline Side-by-side
Showing 3 changed files with 150 additions and 160 deletions
1
2 import api from '@/api/api' 1 import api from '@/api/api'
3 import { 2 import {
4 httpGet, 3 httpGet,
...@@ -14,7 +13,7 @@ export default { ...@@ -14,7 +13,7 @@ export default {
14 }, 13 },
15 components: {}, 14 components: {},
16 methods: { 15 methods: {
17 initData() { }, 16 initData() {},
18 checkBtnGroupFixed() { 17 checkBtnGroupFixed() {
19 let top = this.$refs.ruleBtnGroup.getBoundingClientRect().top; 18 let top = this.$refs.ruleBtnGroup.getBoundingClientRect().top;
20 this.isFixTop = top < 0; 19 this.isFixTop = top < 0;
...@@ -30,5 +29,5 @@ export default { ...@@ -30,5 +29,5 @@ export default {
30 this.checkBtnGroupFixed(); 29 this.checkBtnGroupFixed();
31 }); 30 });
32 }, 31 },
33 created() { } 32 created() {}
34 } 33 }
......
1
2 .content { 1 .content {
3 background-color: #f5f5f5; 2 background-color: #f5f5f5;
4 } 3 }
5 4
6 .fix { 5 .fix {
7 position: fixed; 6 position: fixed;
8 max-width: 950px; 7 max-width: 950px;
9 width: 100%; 8 width: 100%;
10 top: 0; 9 top: 0;
11 } 10 }
12 11
13 .banner { 12 .banner {
14 margin-bottom: 3.333333rem; 13 margin-bottom: 3.333333rem;
15 position: relative; 14 position: relative;
16 .btn-position { 15
17 position: absolute; 16 .btn-position {
18 top: 23.333333rem; 17 position: absolute;
19 left: 2.833333rem ; 18 top: 23.333333rem;
20 } 19 left: 2.833333rem;
21 .btn { 20 }
22 background: #FF5700; 21
23 border: 0; 22 .btn {
24 color: #fff; 23 background: #FF5700;
25 margin-left: 0; 24 border: 0;
26 width: 160px; 25 color: #fff;
27 height: 4.166667rem; 26 margin-left: 0;
28 display: inline-block; 27 width: 160px;
29 line-height: 4.166667rem; 28 height: 4.166667rem;
30 text-align: center; 29 display: inline-block;
31 border-radius: .416667rem; 30 line-height: 4.166667rem;
32 font-size: 1.666667rem; 31 text-align: center;
33 } 32 border-radius: .416667rem;
33 font-size: 1.666667rem;
34 }
34 } 35 }
35 36
36 .fix .rule-btn { 37 .fix .rule-btn {
37 width: 33.33333% !important; 38 width: 33.33333% !important;
38 } 39 }
39 40
40 .blank-pannel { 41 .blank-pannel {
41 height: 2.5rem; 42 height: 2.5rem;
42 } 43 }
43 44
44 .rule-btn-out-group { 45 .rule-btn-out-group {
45 height: 3rem; 46 height: 3rem;
46 } 47 }
47 48
48 .rule-btn-group { 49 .rule-btn-group {
49 display: flex; 50 display: flex;
50 width: 100%; 51 width: 100%;
51 justify-content: space-around; 52 justify-content: space-around;
52 .rule-btn {
53 width: 33%;
54 height: 3rem ;
55 line-height: 3rem ;
56 text-align: center;
57 font-size: 1.166667rem ;
58 color: #666666;
59 background: #ffffff;
60 cursor: pointer;
61 }
62
63 .rule-btn.activity{
64 background: #FF5700;
65 color: #ffffff;
66
67 .triangle {
68 width: 0;
69 height: 0;
70 margin: auto;
71 border: .833333rem solid #FF5700;
72 border-bottom-color: transparent;
73 border-left-color: transparent;
74 border-right-color: transparent;
75 }
76 }
77
78 i {
79 display: inline-block;
80 width: 1.666667rem ;
81 height: 1.666667rem ;
82 margin-right: .666667rem;
83 vertical-align: middle;
84 }
85
86
87 .icon-product {
88 background: url("~@/assets/images/product/icon-product-unselect.png") no-repeat center center;
89 background-size: 75% 60%;
90 }
91 53
92 .activity .icon-product { 54 .rule-btn {
93 background: url("~@/assets/images/product/icon-product.png") no-repeat center center; 55 width: 33%;
94 background-size: 75% 60%; 56 height: 3rem;
95 } 57 line-height: 3rem;
96 58 text-align: center;
97 .icon-process { 59 font-size: 1.166667rem;
98 background: url("~@/assets/images/product/icon-process-unselect.png") no-repeat center center; 60 color: #666666;
99 background-size: 75% 60%; 61 background: #ffffff;
100 } 62 cursor: pointer;
101 63 }
102 .activity .icon-process { 64
103 background: url("~@/assets/images/product/icon-process.png") no-repeat center center; 65 .rule-btn.activity {
104 background-size: 75% 60%; 66 background: #FF5700;
105 } 67 color: #ffffff;
106 68
107 .icon-problem { 69 .triangle {
108 background: url("~@/assets/images/product/icon-problem-unselect.png") no-repeat center center; 70 width: 0;
109 background-size: 75% 60%; 71 height: 0;
110 } 72 margin: auto;
111 73 border: .833333rem solid #FF5700;
112 .activity .icon-problem { 74 border-bottom-color: transparent;
113 background: url("~@/assets/images/product/icon-problem.png") no-repeat center center; 75 border-left-color: transparent;
114 background-size: 75% 60%; 76 border-right-color: transparent;
115 } 77 }
78 }
79
80 i {
81 display: inline-block;
82 width: 1.666667rem;
83 height: 1.666667rem;
84 margin-right: .666667rem;
85 vertical-align: middle;
86 }
87
88
89 .icon-product {
90 background: url("~@/assets/images/product/icon-product-unselect.png") no-repeat center center;
91 background-size: 75% 60%;
92 }
93
94 .activity .icon-product {
95 background: url("~@/assets/images/product/icon-product.png") no-repeat center center;
96 background-size: 75% 60%;
97 }
98
99 .icon-process {
100 background: url("~@/assets/images/product/icon-process-unselect.png") no-repeat center center;
101 background-size: 75% 60%;
102 }
103
104 .activity .icon-process {
105 background: url("~@/assets/images/product/icon-process.png") no-repeat center center;
106 background-size: 75% 60%;
107 }
108
109 .icon-problem {
110 background: url("~@/assets/images/product/icon-problem-unselect.png") no-repeat center center;
111 background-size: 75% 60%;
112 }
113
114 .activity .icon-problem {
115 background: url("~@/assets/images/product/icon-problem.png") no-repeat center center;
116 background-size: 75% 60%;
117 }
116 118
117 } 119 }
118 120
119 .rule-container { 121 .rule-container {
120 display: none; 122 display: none;
121 } 123 }
122 124
123 .rule-container.activity { 125 .rule-container.activity {
126 display: block;
127
128 img {
129 width: 100%;
124 display: block; 130 display: block;
125 img { 131 height: auto;
126 width: 100%; 132 margin: 0 auto;
127 display: block; 133 }
128 height: auto;
129 margin: 0 auto;
130 }
131 } 134 }
132 135
133 .bottom-space { 136 .bottom-space {
134 padding-bottom: 5rem;
135 }
...\ No newline at end of file ...\ No newline at end of file
137 padding-bottom: 5rem;
138 }
......
1 1
2 <template> 2 <template>
3 <div class="content"> 3 <div class="content">
4 <div class="banner"> 4 <div class="banner">
5 <div class="btn btn-position">{{$t('product.btnPosition')}}</div> 5 <div class="btn btn-position">{{$t('product.btnPosition')}}</div>
6 <img src="@/assets/images/product/banner.jpg" /> 6 <img src="@/assets/images/product/banner.jpg" />
7 </div> 7 </div>
8 8
9 <div class="box bottom-space"> 9 <div class="box bottom-space">
10 <div class="rule-btn-out-group" ref="ruleBtnGroup"> 10 <div class="rule-btn-out-group" ref="ruleBtnGroup">
11 <div class="rule-btn-group" :class="{fix : fixTop}"> 11 <div class="rule-btn-group" :class="{fix : fixTop}">
12 <div 12 <div class="rule-btn" :class="{activity : activity == 'product'}" @click="activity = 'product'">
13 class="rule-btn" 13 <div>
14 :class="{activity : activity == 'product'}" 14 <i class="icon-product"></i> {{$t('product.iconProduct')}}
15 @click="activity = 'product'" 15 </div>
16 > 16 <div class="triangle"></div>
17 <div> 17 </div>
18 <i class="icon-product"></i> {{$t('product.iconProduct')}} 18 <div class="rule-btn" :class="{activity : activity == 'process'}" @click="activity = 'process'">
19 </div> 19 <div>
20 <div class="triangle"></div> 20 <i class="icon-process"></i> {{$t('product.iconProcess')}}
21 </div> 21 </div>
22 <div 22 <div class="triangle"></div>
23 class="rule-btn" 23 </div>
24 :class="{activity : activity == 'process'}" 24 <div class="rule-btn" :class="{activity : activity == 'problem'}" @click="activity = 'problem'">
25 @click="activity = 'process'" 25 <div>
26 > 26 <i class="icon-problem"></i> {{$t('product.iconProblem')}}
27 <div> 27 </div>
28 <i class="icon-process"></i> {{$t('product.iconProcess')}} 28 <div class="triangle"></div>
29 </div> 29 </div>
30 <div class="triangle"></div> 30 </div>
31 </div> 31 </div>
32 <div 32 <div class="blank-pannel"></div>
33 class="rule-btn" 33 <div class="rule-container" :class="{activity : activity == 'product'}">
34 :class="{activity : activity == 'problem'}" 34 <img src="@/assets/images/product/product1.jpg" />
35 @click="activity = 'problem'" 35 <img src="@/assets/images/product/product2.jpg" />
36 > 36 <img src="@/assets/images/product/product3.jpg" />
37 <div> 37 </div>
38 <i class="icon-problem"></i> {{$t('product.iconProblem')}} 38 <div class="rule-container" :class="{activity : activity == 'process'}">
39 </div> 39 <img src="@/assets/images/product/process.jpg" />
40 <div class="triangle"></div> 40 </div>
41 </div> 41 <div class="rule-container" :class="{activity : activity == 'problem'}">
42 </div> 42 <img src="@/assets/images/product/question.jpg" />
43 </div> 43 </div>
44 <div class="blank-pannel"></div> 44 </div>
45 <div class="rule-container" :class="{activity : activity == 'product'}"> 45 </div>
46 <img src="@/assets/images/product/product1.jpg" />
47 <img src="@/assets/images/product/product2.jpg" />
48 <img src="@/assets/images/product/product3.jpg" />
49 </div>
50 <div class="rule-container" :class="{activity : activity == 'process'}">
51 <img src="@/assets/images/product/process.jpg" />
52 </div>
53 <div class="rule-container" :class="{activity : activity == 'problem'}">
54 <img src="@/assets/images/product/question.jpg" />
55 </div>
56 </div>
57 </div>
58 </template> 46 </template>
59 47
60 <script src="./product.js"></script> 48 <script src="./product.js"></script>
......