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 16 additions and 26 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 }
...@@ -13,11 +12,13 @@ ...@@ -13,11 +12,13 @@
13 .banner { 12 .banner {
14 margin-bottom: 3.333333rem; 13 margin-bottom: 3.333333rem;
15 position: relative; 14 position: relative;
15
16 .btn-position { 16 .btn-position {
17 position: absolute; 17 position: absolute;
18 top: 23.333333rem; 18 top: 23.333333rem;
19 left: 2.833333rem ; 19 left: 2.833333rem;
20 } 20 }
21
21 .btn { 22 .btn {
22 background: #FF5700; 23 background: #FF5700;
23 border: 0; 24 border: 0;
...@@ -49,18 +50,19 @@ ...@@ -49,18 +50,19 @@
49 display: flex; 50 display: flex;
50 width: 100%; 51 width: 100%;
51 justify-content: space-around; 52 justify-content: space-around;
53
52 .rule-btn { 54 .rule-btn {
53 width: 33%; 55 width: 33%;
54 height: 3rem ; 56 height: 3rem;
55 line-height: 3rem ; 57 line-height: 3rem;
56 text-align: center; 58 text-align: center;
57 font-size: 1.166667rem ; 59 font-size: 1.166667rem;
58 color: #666666; 60 color: #666666;
59 background: #ffffff; 61 background: #ffffff;
60 cursor: pointer; 62 cursor: pointer;
61 } 63 }
62 64
63 .rule-btn.activity{ 65 .rule-btn.activity {
64 background: #FF5700; 66 background: #FF5700;
65 color: #ffffff; 67 color: #ffffff;
66 68
...@@ -77,8 +79,8 @@ ...@@ -77,8 +79,8 @@
77 79
78 i { 80 i {
79 display: inline-block; 81 display: inline-block;
80 width: 1.666667rem ; 82 width: 1.666667rem;
81 height: 1.666667rem ; 83 height: 1.666667rem;
82 margin-right: .666667rem; 84 margin-right: .666667rem;
83 vertical-align: middle; 85 vertical-align: middle;
84 } 86 }
...@@ -122,6 +124,7 @@ ...@@ -122,6 +124,7 @@
122 124
123 .rule-container.activity { 125 .rule-container.activity {
124 display: block; 126 display: block;
127
125 img { 128 img {
126 width: 100%; 129 width: 100%;
127 display: block; 130 display: block;
......
...@@ -9,31 +9,19 @@ ...@@ -9,31 +9,19 @@
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"
14 :class="{activity : activity == 'product'}"
15 @click="activity = 'product'"
16 >
17 <div> 13 <div>
18 <i class="icon-product"></i> {{$t('product.iconProduct')}} 14 <i class="icon-product"></i> {{$t('product.iconProduct')}}
19 </div> 15 </div>
20 <div class="triangle"></div> 16 <div class="triangle"></div>
21 </div> 17 </div>
22 <div 18 <div class="rule-btn" :class="{activity : activity == 'process'}" @click="activity = 'process'">
23 class="rule-btn"
24 :class="{activity : activity == 'process'}"
25 @click="activity = 'process'"
26 >
27 <div> 19 <div>
28 <i class="icon-process"></i> {{$t('product.iconProcess')}} 20 <i class="icon-process"></i> {{$t('product.iconProcess')}}
29 </div> 21 </div>
30 <div class="triangle"></div> 22 <div class="triangle"></div>
31 </div> 23 </div>
32 <div 24 <div class="rule-btn" :class="{activity : activity == 'problem'}" @click="activity = 'problem'">
33 class="rule-btn"
34 :class="{activity : activity == 'problem'}"
35 @click="activity = 'problem'"
36 >
37 <div> 25 <div>
38 <i class="icon-problem"></i> {{$t('product.iconProblem')}} 26 <i class="icon-problem"></i> {{$t('product.iconProblem')}}
39 </div> 27 </div>
......