Adam / gulu-vue

Download as
Browse Code »

Commit 006e965473afaea3f2de6ccab1e84b768c74f29e

Authored by 尹聃
1 parent b83c44fe1f
Exists in master

详情添加购物车

Showing 1 changed file with 9 additions and 17 deletions   Show diff stats
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @006e965
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper 5 <swiper
6 class="swiperImage" 6 class="swiperImage"
7 :indicator-dots="true" 7 :indicator-dots="true"
8 :autoplay="true" 8 :autoplay="true"
9 :interval="4000" 9 :interval="4000"
10 :duration="500" 10 :duration="500"
11 > 11 >
12 <swiper-item 12 <swiper-item
13 v-for="(item, index) in goodInfo.pics" 13 v-for="(item, index) in goodInfo.pics"
14 :key="index" 14 :key="index"
15 > 15 >
16 <image 16 <image
17 :src="item" 17 :src="item"
18 mode="scaleToFill" 18 mode="scaleToFill"
19 ></image> 19 ></image>
20 </swiper-item> 20 </swiper-item>
21 </swiper> 21 </swiper>
22 <view class="D1_price">￥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> 22 <view class="D1_price">￥{{goodInfo.p_sale_price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 </view> 25 </view>
26 <view 26 <view
27 class="D2" 27 class="D2"
28 v-if="updateGoodType == 2 || updateGoodType == 4" 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 > 29 >
30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33 </view> 33 </view>
34 <view 34 <view
35 class="D2" 35 class="D2"
36 v-if="updateGoodType == 1" 36 v-if="updateGoodType == 1"
37 > 37 >
38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> 39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> 40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41 </view> 41 </view>
42 <view 42 <view
43 class="D2" 43 class="D2"
44 v-if="updateGoodType == 3" 44 v-if="updateGoodType == 3"
45 > 45 >
46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> 47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 </view> 49 </view>
50 <view class="D3"> 50 <view class="D3">
51 <view class="screenBar"> 51 <view class="screenBar">
52 <view 52 <view
53 v-for="item in screenItems" 53 v-for="item in screenItems"
54 :key="item.current" 54 :key="item.current"
55 @click="tabChange(item.current)" 55 @click="tabChange(item.current)"
56 > 56 >
57 <view 57 <view
58 class="screenItem" 58 class="screenItem"
59 v-bind:class="{ active: current === item.current }" 59 v-bind:class="{ active: current === item.current }"
60 >{{ item.text || '暂无' }}</view> 60 >{{ item.text || '暂无' }}</view>
61 </view> 61 </view>
62 </view> 62 </view>
63 <view 63 <view
64 class="screen-item" 64 class="screen-item"
65 v-if="current === 1" 65 v-if="current === 1"
66 > 66 >
67 <view class="D3_list"> 67 <view class="D3_list">
68 <view 68 <view
69 v-for="(item) in parameter" 69 v-for="(item) in parameter"
70 :key="item.key" 70 :key="item.key"
71 > 71 >
72 <image 72 <image
73 class="D3_image" 73 class="D3_image"
74 v-bind:src="item.img" 74 v-bind:src="item.img"
75 ></image> 75 ></image>
76 <span>{{item.standard || '暂无'}}</span> 76 <span>{{item.standard || '暂无'}}</span>
77 <span>{{item.slength || '暂无'}}</span> 77 <span>{{item.slength || '暂无'}}</span>
78 </view> 78 </view>
79 </view> 79 </view>
80 </view> 80 </view>
81 <view 81 <view
82 class="screen-item" 82 class="screen-item"
83 v-if="current === 0" 83 v-if="current === 0"
84 > 84 >
85 <view class="D3_list"> 85 <view class="D3_list">
86 <!-- <block> 86 <!-- <block>
87 <view>主体</view> 87 <view>主体</view>
88 <view>商品产地：韩国</view> 88 <view>商品产地：韩国</view>
89 <view>包装清单：彩色隐形 * 1</view> 89 <view>包装清单：彩色隐形 * 1</view>
90 </block> --> 90 </block> -->
91 <!-- 迭代时建议配合接口修改 为数组 --> 91 <!-- 迭代时建议配合接口修改 为数组 -->
92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> 92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93 <view class=""> 93 <view class="">
94 年龄：<view 94 年龄：<view
95 v-for="(item,index) in tag.prod_tag_age" 95 v-for="(item,index) in tag.prod_tag_age"
96 :key="index" 96 :key="index"
97 > 97 >
98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> 98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99 </view> 99 </view>
100 </view> 100 </view>
101 </view> 101 </view>
102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> 102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103 <view class=""> 103 <view class="">
104 颜色：<view 104 颜色：<view
105 v-for="(item,index) in tag.prod_tag_color" 105 v-for="(item,index) in tag.prod_tag_color"
106 :key="index" 106 :key="index"
107 > 107 >
108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> 108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109 </view> 109 </view>
110 </view> 110 </view>
111 </view> 111 </view>
112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> 112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113 <view class=""> 113 <view class="">
114 脸型：<view 114 脸型：<view
115 v-for="(item,index) in tag.prod_tag_face" 115 v-for="(item,index) in tag.prod_tag_face"
116 :key="index" 116 :key="index"
117 > 117 >
118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> 118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119 </view> 119 </view>
120 </view> 120 </view>
121 </view> 121 </view>
122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> 122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123 <view class=""> 123 <view class="">
124 赠品：<view 124 赠品：<view
125 v-for="(item,index) in tag.prod_tag_freesend" 125 v-for="(item,index) in tag.prod_tag_freesend"
126 :key="index" 126 :key="index"
127 > 127 >
128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> 128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129 </view> 129 </view>
130 </view> 130 </view>
131 </view> 131 </view>
132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> 132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133 <view class=""> 133 <view class="">
134 保险：<view 134 保险：<view
135 v-for="(item,index) in tag.prod_tag_insurance" 135 v-for="(item,index) in tag.prod_tag_insurance"
136 :key="index" 136 :key="index"
137 > 137 >
138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> 138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139 </view> 139 </view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> 142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143 <view class=""> 143 <view class="">
144 材质：<view 144 材质：<view
145 v-for="(item,index) in tag.prod_tag_metal" 145 v-for="(item,index) in tag.prod_tag_metal"
146 :key="index" 146 :key="index"
147 > 147 >
148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> 148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149 </view> 149 </view>
150 </view> 150 </view>
151 </view> 151 </view>
152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> 152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153 <view class=""> 153 <view class="">
154 个性：<view 154 个性：<view
155 v-for="(item,index) in tag.prod_tag_personal" 155 v-for="(item,index) in tag.prod_tag_personal"
156 :key="index" 156 :key="index"
157 > 157 >
158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> 158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> 162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163 <view class=""> 163 <view class="">
164 场景：<view 164 场景：<view
165 v-for="(item,index) in tag.prod_tag_sense" 165 v-for="(item,index) in tag.prod_tag_sense"
166 :key="index" 166 :key="index"
167 > 167 >
168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> 168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169 </view> 169 </view>
170 </view> 170 </view>
171 </view> 171 </view>
172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> 172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173 <view class=""> 173 <view class="">
174 性别：<view 174 性别：<view
175 v-for="(item,index) in tag.prod_tag_sex" 175 v-for="(item,index) in tag.prod_tag_sex"
176 :key="index" 176 :key="index"
177 > 177 >
178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> 178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179 </view> 179 </view>
180 </view> 180 </view>
181 </view> 181 </view>
182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> 182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183 <view class=""> 183 <view class="">
184 风格：<view 184 风格：<view
185 v-for="(item,index) in tag.prod_tag_style" 185 v-for="(item,index) in tag.prod_tag_style"
186 :key="index" 186 :key="index"
187 > 187 >
188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> 188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189 </view> 189 </view>
190 </view> 190 </view>
191 </view> 191 </view>
192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> 192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193 <view class=""> 193 <view class="">
194 重量：<view 194 重量：<view
195 v-for="(item,index) in tag.prod_tag_weight" 195 v-for="(item,index) in tag.prod_tag_weight"
196 :key="index" 196 :key="index"
197 > 197 >
198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> 198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199 </view> 199 </view>
200 </view> 200 </view>
201 </view> 201 </view>
202 </view> 202 </view>
203 </view> 203 </view>
204 <view 204 <view
205 class="screen-item " 205 class="screen-item "
206 v-if="current ===2" 206 v-if="current ===2"
207 > 207 >
208 <view class="customerService"> 208 <view class="customerService">
209 <view class="serviceItem"> 209 <view class="serviceItem">
210 <view class="title"> 210 <view class="title">
211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212 <text class="titleText">卖家服务</text> 212 <text class="titleText">卖家服务</text>
213 </view> 213 </view>
214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215 </view> 215 </view>
216 <view class="serviceItem"> 216 <view class="serviceItem">
217 <view class="title"> 217 <view class="title">
218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219 <text class="titleText">平台承诺</text> 219 <text class="titleText">平台承诺</text>
220 </view> 220 </view>
221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222 </view> 222 </view>
223 <view class="serviceItem"> 223 <view class="serviceItem">
224 <view class="title"> 224 <view class="title">
225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226 <text class="titleText">正品保证</text> 226 <text class="titleText">正品保证</text>
227 </view> 227 </view>
228 <view class="itemContent">向您保证所售商品均为正品行货</view> 228 <view class="itemContent">向您保证所售商品均为正品行货</view>
229 </view> 229 </view>
230 <view class="serviceItem2"> 230 <view class="serviceItem2">
231 <view class="title"> 231 <view class="title">
232 <text class="titleText">权利申明</text> 232 <text class="titleText">权利申明</text>
233 </view> 233 </view>
234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235 </view> 235 </view>
236 <view class="serviceItem2"> 236 <view class="serviceItem2">
237 <view class="title"> 237 <view class="title">
238 <text class="titleText">价格保证</text> 238 <text class="titleText">价格保证</text>
239 </view> 239 </view>
240 <view class="itemContent"> 240 <view class="itemContent">
241 <view class="itemContent-child"> 241 <view class="itemContent-child">
242 <text class="contentTitle">平台价:</text> 242 <text class="contentTitle">平台价:</text>
243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244 </view> 244 </view>
245 <view class="itemContent-child"> 245 <view class="itemContent-child">
246 <text class="contentTitle">划线价:</text> 246 <text class="contentTitle">划线价:</text>
247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248 </view> 248 </view>
249 <view class="itemContent-child"> 249 <view class="itemContent-child">
250 <text class="contentTitle">平折扣:</text> 250 <text class="contentTitle">平折扣:</text>
251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252 </view> 252 </view>
253 <view class="itemContent-child"> 253 <view class="itemContent-child">
254 <text class="contentTitle">异常问题:</text> 254 <text class="contentTitle">异常问题:</text>
255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256 </view> 256 </view>
257 257
258 </view> 258 </view>
259 </view> 259 </view>
260 </view> 260 </view>
261 </view> 261 </view>
262 </view> 262 </view>
263 <view 263 <view
264 class="D4" 264 class="D4"
265 v-if="current !==2" 265 v-if="current !==2"
266 > 266 >
267 <view class="D4_esvalue"> 267 <view class="D4_esvalue">
268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
269 <view class="D4_2"> 269 <view class="D4_2">
270 <view 270 <view
271 class="star" 271 class="star"
272 v-for="o in starCount" 272 v-for="o in starCount"
273 :key="o" 273 :key="o"
274 > 274 >
275 <image 275 <image
276 src="../../static/img/detail/d_star.png" 276 src="../../static/img/detail/d_star.png"
277 mode="aspectFill" 277 mode="aspectFill"
278 style="height: 26rpx; width: 28rpx;" 278 style="height: 26rpx; width: 28rpx;"
279 ></image> 279 ></image>
280 </view> 280 </view>
281 </view> 281 </view>
282 </view> 282 </view>
283 <view class="D4_list"> 283 <view class="D4_list">
284 <view 284 <view
285 v-for="(assess) in goodInfo.judge_tag" 285 v-for="(assess) in goodInfo.judge_tag"
286 :key="assess.key" 286 :key="assess.key"
287 >{{assess.name}}</view> 287 >{{assess.name}}</view>
288 </view> 288 </view>
289 </view> 289 </view>
290 <view 290 <view
291 class="D5" 291 class="D5"
292 v-if="current !==2" 292 v-if="current !==2"
293 > 293 >
294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)"> 294 <view class="D5_fixed1" @click="consolg(goodInfo.prodIntro1)">
295 <image src="/static/img/detail/hr.png"></image> 295 <image src="/static/img/detail/hr.png"></image>
296 <view>商品详细</view> 296 <view>商品详细</view>
297 <image src="/static/img/detail/hr.png"></image> 297 <image src="/static/img/detail/hr.png"></image>
298 </view> 298 </view>
299 <view class="D5_all" v-html="test"> 299 <view class="D5_all" v-html="test">
300 <!-- <block> 300 <!-- <block>
301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 301 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
302 </block> --> 302 </block> -->
303 </view> 303 </view>
304 </view> 304 </view>
305
306 <!-- 底部菜单 --> 305 <!-- 底部菜单 -->
307 <view class="botton"> 306 <view class="botton">
308 <view 307 <view
309 @tap="toCart()" 308 @tap="toCart()"
310 class="botton_1" 309 class="botton_1"
311 > 310 >
312 <image v-bind:src="imgShop.img"></image> 311 <image v-bind:src="imgShop.img"></image>
313 <view class="botton_image">购物车</view> 312 <view class="botton_image">购物车</view>
314 </view> 313 </view>
315 <view class="botton_2"> 314 <view class="botton_2">
316 <view 315 <view
317 class="botton_input" 316 class="botton_input"
318 @tap="addCart()" 317 @tap="addCart()"
319 >加入购物车</view> 318 >加入购物车</view>
320 <view 319 <view
321 class="botton_now" 320 class="botton_now"
322 @tap="goPerchase()" 321 @tap="goPerchase()"
323 >立即购买</view> 322 >立即购买</view>
324 </view> 323 </view>
325 </view> 324 </view>
326 </view> 325 </view>
327 </template> 326 </template>
328 327
329 <script> 328 <script>
330 import store from '@/store' 329 import store from '@/store'
331 export default { 330 export default {
332 data () { 331 data () {
333 return { 332 return {
334 test: '', 333 test: '',
335 goodType: 2, 334 goodType: 2,
336 pid: 0, 335 pid: 0,
337 // 购物车数据 336 // 购物车数据
338 addCartList: { 337 addCartList: {
339 mp_id: 335, 338 mp_id: 0,
339 uid: 0,
340 sk_id: 0, 340 sk_id: 0,
341 num: 1, 341 num: 1,
342 price: '' 342 price: ''
343 }, 343 },
344 screenItems: [ 344 screenItems: [
345 { current: 0, text: '商品介绍' }, 345 { current: 0, text: '商品介绍' },
346 { current: 1, text: '规格参数' }, 346 { current: 1, text: '规格参数' },
347 { current: 2, text: '售后保障' } 347 { current: 2, text: '售后保障' }
348 ], 348 ],
349 current: 0, 349 current: 0,
350 starCount: 5, 350 starCount: 5,
351 parameter: [ 351 parameter: [
352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 352 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 353 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 354 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 355 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 356 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' } 357 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }
358 ], 358 ],
359 esvalue: '宝贝好评率', 359 esvalue: '宝贝好评率',
360 introduction: { 360 introduction: {
361 material: '钛合金', 361 material: '钛合金',
362 func: '抗疲劳/防辐射', 362 func: '抗疲劳/防辐射',
363 rate: '男/女' 363 rate: '男/女'
364 }, 364 },
365 imgAll: '/static/img/detail/d8.png', 365 imgAll: '/static/img/detail/d8.png',
366 photoes: [ 366 photoes: [
367 { value: '日常办公', img: '/static/img/detail/d9.png' }, 367 { value: '日常办公', img: '/static/img/detail/d9.png' },
368 { value: '上网', img: '/static/img/detail/d10.png' }, 368 { value: '上网', img: '/static/img/detail/d10.png' },
369 { value: '追剧', img: '/static/img/detail/d11.png' }, 369 { value: '追剧', img: '/static/img/detail/d11.png' },
370 { value: '玩游戏', img: '/static/img/detail/d12.png' } 370 { value: '玩游戏', img: '/static/img/detail/d12.png' }
371 ], 371 ],
372 imgDetail: '/static/img/detail/d13.png', 372 imgDetail: '/static/img/detail/d13.png',
373 imgShop: { 373 imgShop: {
374 img: '/static/tab-cart.png', 374 img: '/static/tab-cart.png',
375 IsShown: false 375 IsShown: false
376 }, 376 },
377 tag: { 377 tag: {
378 prod_tag_freesend: [{ 378 prod_tag_freesend: [{
379 label: '眼镜盒', 379 label: '眼镜盒',
380 value: '262' 380 value: '262'
381 }] 381 }]
382 } 382 }
383 } 383 }
384 }, 384 },
385 onLoad: function ({ pid }) { 385 onLoad: function ({ pid }) {
386 this.pid = pid 386 this.pid = pid
387 store.dispatch('read/fetch', { 387 store.dispatch('read/fetch', {
388 pid 388 pid
389 }).then(() => { 389 }).then(() => {
390 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 390 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
391 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 391 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
392 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 392 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
393 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 393 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
394 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 394 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
395 this.parameter[5].slength = `${this.goodInfo.weight}mm` 395 this.parameter[5].slength = `${this.goodInfo.weight}mm`
396 this.tag = this.goodInfo.tag 396 this.tag = this.goodInfo.tag
397 this.addCartList.price = this.goodInfo.p_sale_price
398 this.test = this.goodInfo.prodIntro1 397 this.test = this.goodInfo.prodIntro1
399 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') 398 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
399 // addCart
400 this.addCartList.price = this.goodInfo.p_sale_price
401 this.addCartList.sk_id = this.goodInfo.skuList[0].sk_id
402 this.addCartList.mp_id = this.goodInfo.glassData.mp_id
403 this.addCartList.uid = this.$store.state.user.userInfo.uid
400 }) 404 })
405 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
401 }, 406 },
402 computed: { 407 computed: {
403 updateGoodType () { 408 updateGoodType () {
404 return this.goodType 409 return this.goodType
405 }, 410 },
406 goodInfo () { 411 goodInfo () {
407 console.log(this.$store.state.read.goodInfo) 412 console.log(this.$store.state.read.goodInfo)
408 return this.$store.state.read.goodInfo 413 return this.$store.state.read.goodInfo
409 } 414 }
410 }, 415 },
411 methods: { 416 methods: {
412 // 前往购物车 417 // 前往购物车
413 toCart() { 418 toCart() {
414 uni.switchTab({ 419 uni.switchTab({
415 url: '/pages/cart/cart', 420 url: '/pages/cart/cart',
416 success: res => {}, 421 success: res => {},
417 fail: (error) => { console.log('跳转购物车失败======>', error) }, 422 fail: (error) => { console.log('跳转购物车失败======>', error) },
418 complete: () => { console.log('toCart') } 423 complete: () => { console.log('toCart') }
419 }) 424 })
420 }, 425 },
421 // 加入购物车 426 // 加入购物车
422 addCart () { 427 addCart () {
423 store.dispatch('cart/addCart', { 428 store.dispatch('cart/addCart', {
424 uid: this.$store.state.user.userInfo.uid, 429 uid: this.$store.state.user.userInfo.uid,
425 openid: this.$store.state.user.userInfo.openid, 430 openid: this.$store.state.user.userInfo.openid,
426 mp_id: this.addCartList.mp_id, 431 mp_id: this.addCartList.mp_id,
427 sk_id: this.addCartList.sk_id, 432 sk_id: this.addCartList.sk_id,
428 num: this.addCartList.num, 433 num: this.addCartList.num,
429 pid: this.pid, 434 pid: this.pid,
430 price: this.addCartList.price, 435 price: this.addCartList.price
431 checkedSKU: {}
432 }) 436 })
433 store.dispatch('cart/getCartList', { 437 store.dispatch('cart/getCartList', {
434 uid: this.$store.state.user.userInfo.uid // 用户id 438 uid: this.$store.state.user.userInfo.uid // 用户id
435 }) 439 })
436 }, 440 },
437 goPerchase () { 441 goPerchase () {
438 // switch (this.updateGoodType) { 442 // switch (this.updateGoodType) {
439 // case '1': 443 // case '1':
440 console.log('goPerchase') 444 console.log('goPerchase')
441 uni.navigateTo({ 445 uni.navigateTo({
442 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 446 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
443 success: res => {}, 447 success: res => {},
444 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 448 fail: (error) => { console.log('跳转参数选择失败======>', error) },
445 complete: () => { console.log('goPerchase') } 449 complete: () => { console.log('goPerchase') }
446 }) 450 })
447 // break 451 // break
448 // case '2': 452 // case '2':
449 // uni.navigateTo({ 453 // uni.navigateTo({
450 // url: '../detailStandard/detailStandard_k', 454 // url: '../detailStandard/detailStandard_k',
451 // success: res => {}, 455 // success: res => {},
452 // fail: () => {}, 456 // fail: () => {},
453 // complete: () => {} 457 // complete: () => {}
454 // }) 458 // })
455 // break 459 // break
456 // case '3': 460 // case '3':
457 // uni.navigateTo({ 461 // uni.navigateTo({
458 // url: '../purchaseLenses/purchaseLenses', 462 // url: '../purchaseLenses/purchaseLenses',
459 // success: res => {}, 463 // success: res => {},
460 // fail: () => {}, 464 // fail: () => {},
461 // complete: () => {} 465 // complete: () => {}
462 // }) 466 // })
463 // break 467 // break
464 // case '4': 468 // case '4':
465 // uni.navigateTo({ 469 // uni.navigateTo({
466 // url: '../detailStandard/detailStandard_sun', 470 // url: '../detailStandard/detailStandard_sun',
467 // success: res => {}, 471 // success: res => {},
468 // fail: () => {}, 472 // fail: () => {},
469 // complete: () => {} 473 // complete: () => {}
470 // }) 474 // })
471 // break 475 // break
472 // default : 476 // default :
473 // break 477 // break
474 // } 478 // }
475 }, 479 },
476 // 加入购物车
477 addCart () {
478 store.dispatch('cart/addCart', {
479 uid: this.$store.state.user.userInfo.uid,
480 openid: this.$store.state.user.userInfo.openid,
481 pid: this.pid,
482 checkedSKU: {}
483 })
484 store.dispatch('cart/getCartList', {
485 uid: this.$store.state.user.userInfo.uid // 用户id
486 })
487 },
488 tabChange (e) { 480 tabChange (e) {
489 if (this.current !== e) { 481 if (this.current !== e) {
490 this.current = e 482 this.current = e
491 } 483 }
492 } 484 }
493 } 485 }
494 } 486 }
495 </script> 487 </script>
496 <style lang='scss'> 488 <style lang='scss'>
497 .container { 489 .container {
498 background-color: #f8f8f8; 490 background-color: #f8f8f8;
499 } 491 }
500 .D1, 492 .D1,
501 .D2, 493 .D2,
502 .D3, 494 .D3,
503 .D4, 495 .D4,
504 .D6 { 496 .D6 {
505 background: #ffffff; 497 background: #ffffff;
506 margin-bottom: 10px; 498 margin-bottom: 10px;
507 padding: 8px 20px 8px 20px; 499 padding: 8px 20px 8px 20px;
508 box-sizing: border-box; 500 box-sizing: border-box;
509 .swiperImage { 501 .swiperImage {
510 width: 684rpx; 502 width: 684rpx;
511 height: 480rpx; 503 height: 480rpx;
512 image { 504 image {
513 max-width: 100%; 505 max-width: 100%;
514 max-height: 100%; 506 max-height: 100%;
515 border-radius: 16rpx; 507 border-radius: 16rpx;
516 } 508 }
517 } 509 }
518 } 510 }
519 .D5 { 511 .D5 {
520 background: #ffffff; 512 background: #ffffff;
521 padding: 8px 20px 8px 20px; 513 padding: 8px 20px 8px 20px;
522 box-sizing: border-box; 514 box-sizing: border-box;
523 } 515 }
524 .swiperImage { 516 .swiperImage {
525 width: 100%; 517 width: 100%;
526 height: 560rpx; 518 height: 560rpx;
527 .swiper-item { 519 .swiper-item {
528 width: 100%; 520 width: 100%;
529 image { 521 image {
530 width: 100%; 522 width: 100%;
531 } 523 }
532 } 524 }
533 } 525 }
534 .D1 { 526 .D1 {
535 .D1_price { 527 .D1_price {
536 color: #eb5d3b; 528 color: #eb5d3b;
537 font-size: 18px; 529 font-size: 18px;
538 margin-top: 5px; 530 margin-top: 5px;
539 font-family: "PingFangSC-Semibold"; 531 font-family: "PingFangSC-Semibold";
540 display: flex; 532 display: flex;
541 justify-content: space-between; 533 justify-content: space-between;
542 .D1_number { 534 .D1_number {
543 color: #999999; 535 color: #999999;
544 font-size: 14px; 536 font-size: 14px;
545 font-family: "PingFangSC-Regular"; 537 font-family: "PingFangSC-Regular";
546 } 538 }
547 } 539 }
548 .D1_name { 540 .D1_name {
549 font-size: 16px; 541 font-size: 16px;
550 font-family: "PingFangSC-Semibold"; 542 font-family: "PingFangSC-Semibold";
551 margin-top: 5px; 543 margin-top: 5px;
552 .D1_name1 { 544 .D1_name1 {
553 font-weight: bold; 545 font-weight: bold;
554 font-size: 16px; 546 font-size: 16px;
555 color: #333333; 547 color: #333333;
556 } 548 }
557 } 549 }
558 .D1_spans { 550 .D1_spans {
559 font-size: 10px; 551 font-size: 10px;
560 color: #999999; 552 color: #999999;
561 margin-top: 5px; 553 margin-top: 5px;
562 span { 554 span {
563 height: 14px; 555 height: 14px;
564 margin-right: 10px; 556 margin-right: 10px;
565 } 557 }
566 } 558 }
567 } 559 }
568 .D2 { 560 .D2 {
569 font-size: 14px; 561 font-size: 14px;
570 font-family: "PingFangSC-Regular"; 562 font-family: "PingFangSC-Regular";
571 view { 563 view {
572 height: 24px; 564 height: 24px;
573 } 565 }
574 .D2_span1 { 566 .D2_span1 {
575 color: #999999; 567 color: #999999;
576 } 568 }
577 .D2_span2 { 569 .D2_span2 {
578 color: #333333; 570 color: #333333;
579 } 571 }
580 } 572 }
581 .D3 { 573 .D3 {
582 .screenBar { 574 .screenBar {
583 width: 670rpx; 575 width: 670rpx;
584 margin-top: 20rpx; 576 margin-top: 20rpx;
585 margin-bottom: 24rpx; 577 margin-bottom: 24rpx;
586 display: flex; 578 display: flex;
587 flex-direction: row; 579 flex-direction: row;
588 justify-content: space-between; 580 justify-content: space-between;
589 align-items: center; 581 align-items: center;
590 font-size: 14px; 582 font-size: 14px;
591 color: #333333; 583 color: #333333;
592 transition: all 0.2s; 584 transition: all 0.2s;
593 } 585 }
594 .screen-item { 586 .screen-item {
595 font-size: 32rpx; 587 font-size: 32rpx;
596 color: #333333; 588 color: #333333;
597 display: flex; 589 display: flex;
598 transition: all 0.2s; 590 transition: all 0.2s;
599 .D3_list { 591 .D3_list {
600 margin-bottom: 4px; 592 margin-bottom: 4px;
601 } 593 }
602 .D3_list view { 594 .D3_list view {
603 display: flex; 595 display: flex;
604 align-content: center; 596 align-content: center;
605 font-size: 14px; 597 font-size: 14px;
606 color: #333333; 598 color: #333333;
607 } 599 }
608 .D3_list image { 600 .D3_list image {
609 width: 50px; 601 width: 50px;
610 height: 25px; 602 height: 25px;
611 margin-right: 6px; 603 margin-right: 6px;
612 } 604 }
613 .D3_list span { 605 .D3_list span {
614 margin-left: 6px; 606 margin-left: 6px;
615 margin-right: 5px; 607 margin-right: 5px;
616 font-family: "PingFangSC-Regular"; 608 font-family: "PingFangSC-Regular";
617 } 609 }
618 } 610 }
619 .active { 611 .active {
620 border-bottom: 4rpx solid #ff6b4a; 612 border-bottom: 4rpx solid #ff6b4a;
621 } 613 }
622 .customerService { 614 .customerService {
623 margin-bottom: 90rpx; 615 margin-bottom: 90rpx;
624 .serviceItem { 616 .serviceItem {
625 margin-bottom: 32rpx; 617 margin-bottom: 32rpx;
626 .title { 618 .title {
627 display: flex; 619 display: flex;
628 flex-direction: row; 620 flex-direction: row;
629 align-items: center; 621 align-items: center;
630 .titleText { 622 .titleText {
631 font-size: 14px; 623 font-size: 14px;
632 color: #333333; 624 color: #333333;
633 margin-bottom: 12rpx; 625 margin-bottom: 12rpx;
634 } 626 }
635 } 627 }
636 .itemContent { 628 .itemContent {
637 font-size: 14px; 629 font-size: 14px;
638 color: #999999; 630 color: #999999;
639 margin-left: 18rpx; 631 margin-left: 18rpx;
640 } 632 }
641 } 633 }
642 .serviceItem2 { 634 .serviceItem2 {
643 margin-left: 18rpx; 635 margin-left: 18rpx;
644 margin-bottom: 32rpx; 636 margin-bottom: 32rpx;
645 .titleText { 637 .titleText {
646 font-size: 14px; 638 font-size: 14px;
647 color: #ff6b4a; 639 color: #ff6b4a;
648 } 640 }
649 .itemContent { 641 .itemContent {
650 font-size: 14px; 642 font-size: 14px;
651 color: #999999; 643 color: #999999;
652 .itemContent-child { 644 .itemContent-child {
653 margin-bottom: 40rpx; 645 margin-bottom: 40rpx;
654 .contentTitle { 646 .contentTitle {
655 border-bottom: 1px solid #ff6b4a; 647 border-bottom: 1px solid #ff6b4a;
656 } 648 }
657 } 649 }
658 } 650 }
659 } 651 }
660 } 652 }
661 } 653 }
662 .D4 { 654 .D4 {
663 .D4_esvalue { 655 .D4_esvalue {
664 font-size: 14px; 656 font-size: 14px;
665 color: #333333; 657 color: #333333;
666 display: flex; 658 display: flex;
667 justify-content: space-between; 659 justify-content: space-between;
668 margin-bottom: 10px; 660 margin-bottom: 10px;
669 .D4_2 { 661 .D4_2 {
670 width: 90px; 662 width: 90px;
671 display: flex; 663 display: flex;
672 align-items: center; 664 align-items: center;
673 justify-content: space-between; 665 justify-content: space-between;
674 } 666 }
675 } 667 }
676 .D4_esvalue view { 668 .D4_esvalue view {
677 font-size: 14px; 669 font-size: 14px;
678 color: #333333; 670 color: #333333;
679 font-weight: bold; 671 font-weight: bold;
680 } 672 }
681 .D4_list{ 673 .D4_list{
682 display: grid; 674 display: grid;
683 grid-row-gap: 10px; 675 grid-row-gap: 10px;
684 grid-column-gap: 4px; 676 grid-column-gap: 4px;
685 } 677 }
686 .D4_list view { 678 .D4_list view {
687 display: flex; 679 display: flex;
688 justify-content: center; 680 justify-content: center;
689 align-items: center; 681 align-items: center;
690 font-size: 12px; 682 font-size: 12px;
691 width: 118px; 683 width: 118px;
692 height: 24px; 684 height: 24px;
693 border-radius: 2px; 685 border-radius: 2px;
694 background: #f2f2f2; 686 background: #f2f2f2;
695 color: #666666; 687 color: #666666;
696 // letter-spacing: 1px; 688 // letter-spacing: 1px;
697 } 689 }
698 } 690 }
699 .D5 { 691 .D5 {
700 .D5_fixed1 { 692 .D5_fixed1 {
701 display: flex; 693 display: flex;
702 justify-content: space-between; 694 justify-content: space-between;
703 align-content: center; 695 align-content: center;
704 margin-bottom: 12px; 696 margin-bottom: 12px;
705 view { 697 view {
706 font-size: 14px; 698 font-size: 14px;
707 color: #333333; 699 color: #333333;
708 font-weight: bold; 700 font-weight: bold;
709 font-family: "PingFangSC-Medium"; 701 font-family: "PingFangSC-Medium";
710 line-height: 24px; 702 line-height: 24px;
711 } 703 }
712 image { 704 image {
713 width: 240rpx; 705 width: 240rpx;
714 height: 3px; 706 height: 3px;
715 margin-top: 10px; 707 margin-top: 10px;
716 } 708 }
717 } 709 }
718 .D5_all { 710 .D5_all {
719 width: 100%; 711 width: 100%;
720 margin-top: 30rpx; 712 margin-top: 30rpx;
721 margin-right: 30rpx; 713 margin-right: 30rpx;
722 margin-bottom: 180rpx; 714 margin-bottom: 180rpx;
723 font-family: "PingFangSC-Regular"; 715 font-family: "PingFangSC-Regular";
724 // border: #999999 solid 1.5px; 716 // border: #999999 solid 1.5px;
725 } 717 }
726 } 718 }
727 .D6 { 719 .D6 {
728 width: 100%; 720 width: 100%;
729 height: 430px; 721 height: 430px;
730 background: #f9f6ed; 722 background: #f9f6ed;
731 margin-bottom: 74px; 723 margin-bottom: 74px;
732 view { 724 view {
733 text-align: center; 725 text-align: center;
734 } 726 }
735 .D6_v1 { 727 .D6_v1 {
736 font-weight: bold; 728 font-weight: bold;
737 } 729 }
738 .D6_v2 { 730 .D6_v2 {
739 font-size: 14px; 731 font-size: 14px;
740 margin-bottom: 30px; 732 margin-bottom: 30px;
741 } 733 }
742 .D6_v5 { 734 .D6_v5 {
743 .D6_v5_s1 { 735 .D6_v5_s1 {
744 font-weight: bold; 736 font-weight: bold;
745 } 737 }
746 .D6_v5_s2 { 738 .D6_v5_s2 {
747 font-size: 14px; 739 font-size: 14px;
748 } 740 }
749 } 741 }
750 } 742 }
751 .botton { 743 .botton {
752 position: fixed; 744 position: fixed;
753 bottom: 0; 745 bottom: 0;
754 height: 74px; 746 height: 74px;
755 width: 100%; 747 width: 100%;
756 background: #ffffff; 748 background: #ffffff;
757 padding: 20px 20px 8px 20px; 749 padding: 20px 20px 8px 20px;
758 font-family: "PingFangSC-Regular"; 750 font-family: "PingFangSC-Regular";
759 box-sizing: border-box; 751 box-sizing: border-box;
760 display: flex; 752 display: flex;
761 justify-content: space-between; 753 justify-content: space-between;
762 align-content: center; 754 align-content: center;
763 .botton_1 { 755 .botton_1 {
764 width: 20%; 756 width: 20%;
765 height: 100%; 757 height: 100%;
766 text-align: center; 758 text-align: center;
767 color: #989898; 759 color: #989898;
768 } 760 }
769 image { 761 image {
770 width: 60%; 762 width: 60%;
771 height: 30px; 763 height: 30px;
772 } 764 }
773 .botton_image { 765 .botton_image {
774 font-size: 12px; 766 font-size: 12px;
775 text-align: center; 767 text-align: center;
776 } 768 }
777 .botton_2 { 769 .botton_2 {
778 width: 74%; 770 width: 74%;
779 height: 86%; 771 height: 86%;
780 display: grid; 772 display: grid;
781 grid-template-columns: 50% 50%; 773 grid-template-columns: 50% 50%;
782 } 774 }
783 .botton_input { 775 .botton_input {
784 display: inline-flex; 776 display: inline-flex;
785 align-items: center; 777 align-items: center;
786 justify-content: space-around; 778 justify-content: space-around;
787 background: #fff0ec; 779 background: #fff0ec;
788 font-size: 16px; 780 font-size: 16px;
789 color: #ff6b4a; 781 color: #ff6b4a;
790 border-radius: 20px 0 0 20px; 782 border-radius: 20px 0 0 20px;
791 } 783 }
792 .botton_now { 784 .botton_now {
793 display: inline-flex; 785 display: inline-flex;
794 align-items: center; 786 align-items: center;
795 justify-content: space-around; 787 justify-content: space-around;
796 background: #ff6b4a; 788 background: #ff6b4a;