w-front-end / select_good · Commits

Commit cf3c774cb18e8824b0e56f20fd76ffc5a455e916

Authored by zhiyangdu
1 parent 2ceea29c

礼物列表样式优化

Inline Side-by-side
Showing 2 changed files with 90 additions and 80 deletions
src/components/giftItem/giftItem.less
  View file @cf3c774
1   -.giftItem_box{
2   - width:640px;
3   - height:453px;
4   - background:rgba(255,255,255,1);
5   - box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
6   - border-radius:16px;
  1 +.giftItem_box {
  2 + width: 640px;
  3 + height: 453px;
  4 + background: rgba(255, 255, 255, 1);
  5 + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
  6 + border-radius: 16px;
7 7 margin: 43px auto 0 auto;
8 8 padding: 25px;
9   - .user_info{
  9 + .user_info {
10 10 display: flex;
11 11 position: relative;
12 12 padding-bottom: 22px;
13   - border-bottom: solid 1px rgba(247,247,248,1);
14   - img{
15   - width:50px;
16   - height:50px;
  13 + border-bottom: solid 1px rgba(247, 247, 248, 1);
  14 + img {
  15 + width: 50px;
  16 + height: 50px;
17 17 border-radius: 50px;
18 18 }
19   - .name{
20   - height:50px;
21   - font-size:28px;
22   - font-weight:400;
23   - color:rgba(51,51,51,1);
24   - line-height:50px;
  19 + .name {
  20 + height: 50px;
  21 + font-size: 28px;
  22 + font-weight: 400;
  23 + color: rgba(51, 51, 51, 1);
  24 + line-height: 50px;
25 25 margin-left: 20px;
26 26 }
27   - .btn{
28   - width:144px;
29   - height:52px;
  27 + .btn {
  28 + width: 144px;
  29 + height: 52px;
30 30 line-height: 52px;
31   - background:rgba(254,246,233,1);
32   - border-radius:96px 0px 0px 96px;
  31 + background: rgba(254, 246, 233, 1);
  32 + border-radius: 96px 0px 0px 96px;
33 33 text-align: center;
34 34 font-size: 26px;
35   - font-weight:400;
36   - color:rgba(245,166,35,1);
  35 + font-weight: 400;
  36 + color: rgba(245, 166, 35, 1);
37 37 position: absolute;
38 38 right: -35px;
39 39 }
40   - .gift_active{
41   - height:40px;
42   - font-size:28px;
43   - font-weight:400;
44   - color:rgba(208,2,27,1);
45   - line-height:40px;
  40 + .gift_active {
  41 + height: 40px;
  42 + font-size: 28px;
  43 + font-weight: 400;
  44 + color: rgba(208, 2, 27, 1);
  45 + line-height: 40px;
46 46 }
47 47 }
48   - .item_info{
  48 + .item_info {
49 49 display: flex;
50 50 margin-top: 30px;
51 51 padding-bottom: 30px;
52   - border-bottom: solid 1px rgba(247,247,248,1);
53   - img{
54   - width:159px;
55   - height:160px;
56   - border-radius:10px;
  52 + border-bottom: solid 1px rgba(247, 247, 248, 1);
  53 + img {
  54 + width: 159px;
  55 + height: 160px;
  56 + border-radius: 10px;
57 57 }
58   - .box{
  58 + .box {
59 59 margin-left: 30px;
60 60 position: relative;
61   - .name{
62   - font-size:28px;
63   - font-weight:400;
64   - color:rgba(51,51,51,1);
  61 + .name {
  62 + font-size: 28px;
  63 + font-weight: 400;
  64 + color: rgba(51, 51, 51, 1);
65 65 max-height: 80px;
66 66 /*! autoprefixer: off */
67 67 -webkit-box-orient: vertical;
... ... @@ -71,42 +71,42 @@
71 71 overflow: hidden;
72 72 white-space: normal;
73 73 }
74   - .pirce{
  74 + .pirce {
75 75 width: 100%;
76 76 position: absolute;
77 77 left: 0;
78 78 bottom: 0;
79 79 display: flex;
80 80 justify-content: space-between;
81   - .title{
82   - span{
83   - width:15px;
84   - height:33px;
85   - font-size:24px;
86   - font-weight:500;
87   - color:rgba(208,2,27,1);
88   - line-height:33px;
  81 + .title {
  82 + span {
  83 + width: 15px;
  84 + height: 33px;
  85 + font-size: 24px;
  86 + font-weight: 500;
  87 + color: rgba(208, 2, 27, 1);
  88 + line-height: 33px;
89 89 }
90   - height:50px;
91   - font-size:36px;
92   - font-weight:500;
93   - color:rgba(208,2,27,1);
94   - line-height:50px;
  90 + height: 50px;
  91 + font-size: 36px;
  92 + font-weight: 500;
  93 + color: rgba(208, 2, 27, 1);
  94 + line-height: 50px;
95 95 }
96   - .btn{
97   - width:146px;
98   - height:52px;
  96 + .btn {
  97 + width: 146px;
  98 + height: 52px;
99 99 line-height: 52px;
100   - background:rgba(253,241,242,1);
101   - border-radius:8px;
  100 + background: rgba(253, 241, 242, 1);
  101 + border-radius: 8px;
102 102 text-align: center;
103 103 font-size: 26px;
104   - color:rgba(208,2,27,1);
  104 + color: rgba(208, 2, 27, 1);
105 105 }
106 106 }
107 107 }
108 108 }
109   - .steps_box{
  109 + .steps_box {
110 110 margin-top: 58px;
111 111 .line_box {
112 112 display: flex;
... ... @@ -134,36 +134,46 @@
134 134 }
135 135 }
136 136 }
137   - .active{
138   - .item{
139   - .img{
  137 + .active {
  138 + .item {
  139 + .img {
140 140 width: 16px;
141 141 height: 16px;
142   - background: url("/static/img/spot_active.png") no-repeat top;
  142 + background: url("/static/img/spot_active.png") no-repeat
  143 + top;
143 144 background-size: 100%;
144 145 }
145   - .line_box{
146   -
147   - }
148 146 }
149 147 }
  148 + .active_line {
  149 + .item {
  150 + .line_box {
  151 + .line {
  152 + background: rgba(208, 2, 27, 1);
  153 + }
  154 + }
  155 + }
  156 + }
150 157 }
151   - .desc_box{
  158 + .desc_box {
152 159 display: flex;
153 160 justify-content: space-between;
154 161 margin: 17px auto 0 auto;
155   - .desc{
  162 + .desc {
156 163 width: 88px;
157   - height:30px;
158   - font-size:22px;
159   - font-weight:400;
160   - color:rgba(202,202,202,1);
161   - line-height:30px;
  164 + height: 30px;
  165 + font-size: 22px;
  166 + font-weight: 400;
  167 + color: rgba(202, 202, 202, 1);
  168 + line-height: 30px;
162 169 margin-top: 20px;
163 170 }
  171 + .active {
  172 + color: #666666;
  173 + }
164 174 }
165   - .box:last-child{
166   - .item .line_box{
  175 + .box:last-child {
  176 + .item .line_box {
167 177 display: none;
168 178 }
169 179 }
... ...
src/components/giftItem/giftItem.vue
  View file @cf3c774
... ... @@ -29,7 +29,7 @@
29 29 <!--步骤条-->
30 30 <div class="steps_box">
31 31 <div class="line_box">
32   - <div class="box active">
  32 + <div class="box active active_line">
33 33 <div class="item">
34 34 <div class="img">
35 35 </div>
... ... @@ -75,7 +75,7 @@
75 75 </div>
76 76 </div>
77 77 <div class="desc_box">
78   - <div class="desc">
  78 + <div class="desc active">
79 79 点击送礼
80 80 </div>
81 81 <div class="desc">
... ...