goods.vue 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801
  1. <template>
  2. <view class="">
  3. <view class="content">
  4. <!-- <view class="share-box centerV ">
  5. <image class="w48 h48 " src="" mode=""></image>
  6. <text class="color-text mt8 weight-500 fs20">微信分享</text>
  7. </view> -->
  8. <!-- 商品轮播图片 -->
  9. <!-- <view class="shop-banner" @click="showImg()">
  10. 商品轮播图
  11. <swiper class="swiper" :indicator-dots="false" :circular="true" :autoplay="true" :interval="3000"
  12. :duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff" @change="">
  13. <swiper-item class="swiper-item" v-for="(item,index) in banner" :key="index">
  14. <image :src="item" mode="aspectFill"></image>
  15. <view class="cf-box" v-if="product.productType==2">
  16. <view class="title">处方药</view>
  17. <view class="subTitle">请在医师指导下使用</view>
  18. </view>
  19. </swiper-item>
  20. </swiper>
  21. 底部遮罩
  22. <view class="banner-mask"></view>
  23. 数量
  24. <view class="num-box"><text class="weight-500">{{ activeBanner }}</text>/{{ banner.length }}</view>
  25. </view> -->
  26. <view class="shop-banner">
  27. <view class="swiper">
  28. <view class="swiper-item">
  29. <image :src="goosDetail.imgUrl" mode="aspectFill"></image>
  30. <view class="cf-box" v-if="product.productType==2">
  31. <view class="title">处方药</view>
  32. <view class="subTitle">请在医师指导下使用</view>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <!-- 详细信息 -->
  38. <view class="det-info">
  39. <view class="price-box">
  40. <view class="price">
  41. <text class="label">会员价</text>
  42. <text class="unit">¥</text>
  43. <text class="num">{{goosDetail.price}}</text>
  44. <text class="fs24 color-text2">零售价</text>
  45. <text class="old">¥{{goosDetail.otPrice}}</text>
  46. </view>
  47. <text class="fs24 color-text2">月售{{goosDetail.sales}}件</text>
  48. </view>
  49. <!-- <view class="name-box">
  50. <view class="tag"></view>
  51. {{product.productName}}
  52. </view> -->
  53. <!-- <view class="intro" v-if="product.productInfo!=null" v-html="product.productInfo.replace(/\n/g,'<br>')"> -->
  54. </view>
  55. </view>
  56. <view class="guige">
  57. <view class="guige-gg">
  58. <text class="gg-text">规格</text>
  59. <text class="gg-text2">云南白药气雾剂 85g+30g *1 、说明书*1</text>
  60. </view>
  61. <view class="safe-box">
  62. <text class="text">服务</text>
  63. <view class="box">
  64. <view v-for="(item,index) in serviceList" :key="index">
  65. <image src="/static/images/googs_service.png" mode=""></image>
  66. <text>{{item}}</text>
  67. </view>
  68. <view @click="openEditMoney()">
  69. <image class='w48 h48' src="/static/images/right_arrow.png"></image>
  70. </view>
  71. </view>
  72. </view>
  73. <!-- 点击服务,出现弹窗-->
  74. <view class="popup-box" v-if="editShow">
  75. <view class="info-mask" @tap="cancelEditMoney()"></view>
  76. <view class="info-form">
  77. <view class="top">
  78. <view class="title">服务</view>
  79. <view class="close" @click="cancelEditMoney()">
  80. <image class='w48 h48' src="" mode=""></image>
  81. </view>
  82. </view>
  83. <view class="line"></view>
  84. <view class="form-box">
  85. <view class="form-item2">
  86. <view class="form-item-box">
  87. <image class='w28 h28' src="" mode=""></image>
  88. <text>免邮发货</text>
  89. </view>
  90. <view class="form-content">
  91. 订单支付成功后48小时内发货,若未在48小时内发货,平台审核后消费者将会收到至少3元无门槛红包(特殊商品及不可抗力因素除外)
  92. </view>
  93. </view>
  94. <view class="form-item2">
  95. <view class="form-item-box">
  96. <image class='w28 h28' src="" mode=""></image>
  97. <text>药师服务</text>
  98. </view>
  99. <view class="form-content">
  100. 用药关怀认证药师,24小时专业用药咨询
  101. </view>
  102. </view>
  103. <view class="form-item2">
  104. <view class="form-item-box">
  105. <image class='w28 h28' src="" mode=""></image>
  106. <text>隐私保护</text>
  107. </view>
  108. <view class="form-content">
  109. 除患者本人或其授权的代理人外,其他人员未经允许不得随意查阅患者的医疗记录
  110. </view>
  111. </view>
  112. </view>
  113. <view class="btns">
  114. <view class="sub-btn" @click="cancelEditMoney()">确定</view>
  115. </view>
  116. </view>
  117. </view>
  118. </view>
  119. <!-- 购买人数、库存 -->
  120. <view class="shop-box">
  121. <view class=""
  122. style="flex: 1;overflow: hidden; display: flex; justify-content: space-between; align-items: center;">
  123. <!-- 店铺图片logo -->
  124. <!-- <view class="logo">
  125. <image src="" mode="aspectFill"></image>
  126. </view> -->
  127. <view class="txtBox">
  128. <view class="name">南泉达路店</view>
  129. <view class="desc">24小时营业 · 月售{{}} · 支持预订</view>
  130. </view>
  131. </view>
  132. <button class="goShop"
  133. @click="navgetTo('/pages_shop/store?liveId='+liveId)">进店</button>
  134. </view>
  135. <!-- 图文详情 -->
  136. <view class="det-box">
  137. <view class="title">药品详情</view>
  138. <view class="det-title">
  139. <view class="tt">说明书</view>
  140. <view class="det-right">
  141. <text>查看详情</text>
  142. <image class='w48 h48' src=""></image>
  143. </view>
  144. </view>
  145. <view class="det-table">
  146. <view class="row">
  147. <text class="cell cell-1">通用名称</text>
  148. <text class="cell cell-2">云南白药气雾剂</text>
  149. </view>
  150. <view class="row">
  151. <text class="cell cell-1">成份</text>
  152. <text class="cell cell-2">国家保密方,本品含草乌(制)、雪上一枝蒿(制),其余成份略。</text>
  153. </view>
  154. <view class="row">
  155. <text class="cell cell-1">性状</text>
  156. <text class="cell cell-2">云南白药气雾剂为非定量阀门气雾剂,在耐压容器中的药液为淡黄...</text>
  157. </view>
  158. </view>
  159. <view class="inner">
  160. <view v-html="product.description" style="font-size:0"></view>
  161. </view>
  162. </view>
  163. <!-- 底部按钮 -->
  164. <view class="btn-foot">
  165. <view class="menu-box">
  166. <view class="item" @click="navgetTo('./store')">
  167. <image src="/static/images/googs1.png" mode=""></image>
  168. <text class="label">店铺</text>
  169. </view>
  170. <!-- <view class="item" @click="navgetTo('pages/home/living')" style="position: relative;">
  171. <image src="/static/images/googs2.png" mode=""></image>
  172. <text class="label">直播间</text>
  173. <button class="contact-btn" open-type="contact"></button>
  174. </view> -->
  175. <!-- <view class="item" style="position: relative;">
  176. <image src="/static/images/googs2.png" mode=""></image>
  177. <text class="label">咨询</text>
  178. <button class="contact-btn" open-type="contact"></button>
  179. </view> -->
  180. <view class="item" @click="navgetTo('./cart')">
  181. <uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
  182. <image src="/static/images/googs3.png" mode=""></image>
  183. </uni-badge>
  184. <text class="label">购物车</text>
  185. </view>
  186. </view>
  187. <view class="btn-box">
  188. <view class="btn cart" @click="addCart('cart')">加入购物车</view>
  189. <view class="btn buy" @click="addCart('buy')">{{buyText}}</view>
  190. </view>
  191. </view>
  192. <!-- 选择药品规格弹窗 -->
  193. <popupBottom ref="popup" :visible.sync="specVisible" title=" " radius="32" maxHeight="800">
  194. <view class="product-spec">
  195. <view class="pro-info">
  196. <view class="img-box">
  197. <image :src="goosDetail?.imgUrl ||$img.img " mode="aspectFill"></image>
  198. </view>
  199. <view class="info-text">
  200. <view class="info-title">{{goosDetail.productName}}</view>
  201. <view class="price">
  202. <view class="label">会员价</view>
  203. <text class="unit">¥</text>
  204. <text class="num">{{ goosDetail.price ? goosDetail.price.toFixed(2) : '0.00' }}</text>
  205. </view>
  206. <view class="desc-box">
  207. <text class="text">月售{{goosDetail.sales}}件</text>
  208. </view>
  209. </view>
  210. </view>
  211. <!-- 选择健康管理师 -->
  212. <!-- <view class="tech-pBox" style="margin-top: 20rpx;">
  213. <view class="label">选择健康管理师</view>
  214. <view v-for="(item,index) in storePriceList.slice(0,2)" :key="index"
  215. :class="productValueSelect.storeId == item.storeId ? 'item hover':'item'"
  216. @click="storeChange(item,index)">
  217. <image mode="aspectFill"
  218. :src="productValueSelect.image==null||productValueSelect.image==''?product.image:productValueSelect.image">
  219. </image>
  220. <view class="tech-right">
  221. <view class="tech-right-top">
  222. <text class="title-1">秦宇</text>
  223. <text class="title-2">健康管理师/执业药师</text>
  224. </view>
  225. <view class="tech-right-bottom">{{item.storeName}}</view>
  226. </view>
  227. </view>
  228. </view> -->
  229. <u-popup :show="showStorePicker" :round="16" mode="bottom">
  230. <view class="storepopup">
  231. <view class="storepopup-title">
  232. 选择店铺
  233. <image class="close-icon" src="" mode="widthFix"></image>
  234. </view>
  235. <scroll-view enable-flex class="shop-pBox storepopup-box" scroll-y="true">
  236. <view v-for="(item,index) in storePriceList" :key="index"
  237. :class="productValueSelect.storeId == item.storeId ? 'item hover':'item'"
  238. @click="pickerStore(item,index)">
  239. <view class="top x-bc">
  240. <view class="price"><text class="strong">¥</text>{{ item.price.toFixed(2) }}</view>
  241. <view class="num">销售{{utils.formatSalesNum(item.sales) }}</view>
  242. </view>
  243. <view class="bot x-bc shop-pBox-name">
  244. <view class="name">{{item.storeName}}</view>
  245. <u-icon name="arrow-right" color="#000" size="14"></u-icon>
  246. </view>
  247. </view>
  248. </scroll-view>
  249. </view>
  250. </u-popup>
  251. <!-- <view class="spec-box">
  252. <view v-for="(item,index) in attrs">
  253. <view class="title">{{item.attrName}}</view>
  254. <view class="spec-list">
  255. <view v-for="(subItem,subindex) in item.values" :key="subindex"
  256. :class="subindex==item.index?'item active':'item'">
  257. {{ subItem }}
  258. </view>
  259. </view>
  260. </view>
  261. </view> -->
  262. <view class="price-num">
  263. <view class="label">数量</view>
  264. <u-number-box bgColor="#ececec" v-model="goodsNum" @change="goodsNumChange"></u-number-box>
  265. </view>
  266. <view class="sub-btn" @click="submit">确定</view>
  267. </view>
  268. </popupBottom>
  269. <!-- <view class="loadding" v-if="loadding==true">
  270. <image src=""></image>
  271. <text class="text">加载中...</text>
  272. </view> -->
  273. <!-- <u-modal :show="showModal" title="温馨提示" content="处方药须凭处方在药师指导下购买和使用" @confirm="hideModal()"></u-modal> -->
  274. <!-- <view>
  275. <view @click="operateOrder(0)" style="background-color: aqua; padding: 100rpx;">取消</view>
  276. <view @click="operateOrder(1)" style="background-color: #ff0004;padding: 150rpx;">确认</view>
  277. </view> -->
  278. </view>
  279. </template>
  280. <script>
  281. import {
  282. updateConfirm, // 点击取消/支付订单
  283. updateLiveOrder, // 取消/支付订单
  284. liveOrderKey // 生成订单key
  285. } from "@/api/order.js"
  286. import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
  287. import {
  288. liveGoodsDetail
  289. } from "@/api/live.js"
  290. export default {
  291. components: {
  292. popupBottom
  293. },
  294. data() {
  295. return {
  296. totalNum: 1,
  297. orderKey: null,
  298. type: null,
  299. liveOrderList: [], //下订单的 不在这个页面
  300. liveId: null,
  301. // storeId:uni.setStorageSync("storeId"),
  302. serviceList: ['免邮发货', '药师服务', '隐私保护'],
  303. editShow: false,
  304. productId: null,
  305. goosDetail: {}, //商品详情
  306. loadding: true,
  307. buyText: "立即购买",
  308. showStorePicker: false,
  309. goodsNum: 0, //商品选择数量
  310. productValueSelect: {
  311. price: 0,
  312. serviceFee: 0
  313. },
  314. attrs: [],
  315. values: [],
  316. stores: [],
  317. storeNames: [],
  318. storeIdx: 0,
  319. storeName: "",
  320. product: {
  321. price: 0,
  322. otPrice: 0,
  323. },
  324. showModal: false,
  325. // 当前轮播的图片
  326. activeBanner: 1,
  327. // 购物车数量
  328. cartCount: 0,
  329. // 规格弹窗
  330. specVisible: false,
  331. // 规格数量
  332. specNum: 1,
  333. config: null,
  334. showServiceFee: false,
  335. selectVal: "",
  336. // 链接带的storeId
  337. urlStoreId: undefined,
  338. // 所选规格门店店铺价格
  339. storePriceList: [],
  340. // 所选店铺
  341. storeSelectInfo: {},
  342. // 保存选的规格
  343. choseSpecSubIndex: 0,
  344. choseSpecIndex: 0,
  345. };
  346. },
  347. onLoad(options) {
  348. if (options.productId) {
  349. this.productId = options.productId;
  350. // this.productId = decodeURIComponent(options.productId);
  351. console.log("接收到的productId:", this.productId);
  352. }
  353. this.liveId = options.liveId
  354. // console.log("options", JSON.stringify(options))
  355. // if (options.param) {
  356. // console.log("param", JSON.stringify(param))
  357. // this.productId = options.param.productId;
  358. // this.liveId = options.param.liveId;
  359. // this.storeId = options.param.storeId;
  360. // // this.productId = decodeURIComponent(options.productId);
  361. // console.log("接收到的productId:", this.productId);
  362. // }
  363. },
  364. mounted() {
  365. this.getliveGoods()
  366. var userInfo = uni.getStorageSync("userInfo")
  367. console.log("之前的数据在这里", userInfo)
  368. },
  369. onShow() {
  370. },
  371. methods: {
  372. // 获得key
  373. getKey() {
  374. liveOrderKey().then(res => {
  375. if (res.code == 200) {
  376. console.log("下订单的key>>>>", res)
  377. this.orderKey = res.orderKey
  378. console.log("key>>>>", this.orderKey)
  379. uni.navigateTo({
  380. url: '/pages_shop/confirmCreateOrder?orderKey=' + this.orderKey + '&liveId=' +
  381. this.liveId + '&productId=' + this.productId + '&totalNum=' + this
  382. .totalNum + '&price=' + this.goosDetail.price
  383. })
  384. } else {
  385. uni.showToast({
  386. title: res.msg,
  387. icon: 'none'
  388. });
  389. }
  390. },
  391. rej => {}
  392. );
  393. },
  394. // 点击取消/支付订单
  395. operateOrder(type) {
  396. // console.log("this.liveOrderList" ,JSON.parse( this.liveOrderList.orderId));
  397. let orderId = this.liveOrderList
  398. console.log("orderId>>", orderId)
  399. // updateConfirm(orderId, type).then(res => {
  400. // if (res.code == 200) {
  401. // console.log("点击取消/支付订单>>>>", res)
  402. // } else {
  403. // uni.showToast({
  404. // title: res.msg,
  405. // icon: 'none'
  406. // });
  407. // }
  408. // },
  409. // rej => {}
  410. // );
  411. },
  412. // 选择商品数量
  413. goodsNumChange(e) {
  414. console.log('当前选择商品数量为: ' + e.value)
  415. this.totalNum = e.value
  416. },
  417. // 提交
  418. submit() {
  419. this.specVisible = false
  420. this.getKey()
  421. // this.doAddCart(this.type);
  422. },
  423. // 加入购物车
  424. addCart(type) {
  425. this.type = type;
  426. this.specVisible = true
  427. },
  428. // doAddCart(type) {
  429. // if (this.specNum == 0) {
  430. // uni.showToast({
  431. // icon: 'none',
  432. // title: "库存不足",
  433. // });
  434. // return;
  435. // }
  436. // var isBuy = type == "buy" ? 1 : 0;
  437. // let data = {
  438. // isBuy: isBuy,
  439. // cartNum: this.specNum,
  440. // productId: this.productValueSelect.productId,
  441. // attrValueId: this.productValueSelect.id
  442. // };
  443. // addCart(data).then(
  444. // res => {
  445. // if (res.code == 200) {
  446. // if (type == "buy") {
  447. // const selectCarts = [{
  448. // storeId: this.storeId,
  449. // data: {
  450. // type: this.type,
  451. // cartIds: res.id,
  452. // }
  453. // }]
  454. // uni.navigateTo({
  455. // url: '/pages/shopping/confirmOrder?type=' + this.type + '&orderType=' +
  456. // this.orderType + '&confirmParam=' + encodeURIComponent(JSON.stringify(
  457. // selectCarts))
  458. // })
  459. // } else {
  460. // this.getCartCount()
  461. // uni.showToast({
  462. // icon: 'success',
  463. // title: "添加成功",
  464. // });
  465. // }
  466. // } else {
  467. // uni.showToast({
  468. // icon: 'none',
  469. // title: res.msg,
  470. // });
  471. // this.getProductDetails()
  472. // }
  473. // },
  474. // rej => {}
  475. // );
  476. // },
  477. // 跳转页面
  478. navgetTo(url) {
  479. console.log("跳转")
  480. uni.navigateTo({
  481. url: url
  482. })
  483. },
  484. openEditMoney() {
  485. this.editShow = true;
  486. },
  487. //商品详情
  488. getliveGoods() {
  489. liveGoodsDetail(this.productId).then(res => {
  490. if (res.code == 200) {
  491. console.log("小黄车 商品详情>>>>", res)
  492. this.goosDetail = res.data
  493. } else {
  494. uni.showToast({
  495. title: res.msg,
  496. icon: 'none'
  497. });
  498. }
  499. },
  500. rej => {}
  501. );
  502. },
  503. }
  504. }
  505. </script>
  506. <style lang="scss">
  507. .content {
  508. font-family: PingFang SC;
  509. }
  510. .share-box {
  511. position: fixed;
  512. right: 24rpx;
  513. top: 70%;
  514. z-index: 99;
  515. width: 112rpx;
  516. height: 112rpx;
  517. border-radius: 16rpx 16rpx 16rpx 16rpx;
  518. border: 1rpx solid #EFF3F7;
  519. background-color: #FFFFFF;
  520. }
  521. .shop-banner {
  522. height: 756rpx;
  523. background-color: #FFFFFF;
  524. position: relative;
  525. .swiper-item {
  526. box-sizing: border-box;
  527. position: relative;
  528. }
  529. .swiper,
  530. .swiper-item,
  531. .swiper-item image {
  532. width: 100%;
  533. height: 100%;
  534. }
  535. .banner-mask {
  536. width: 100%;
  537. height: 44rpx;
  538. position: absolute;
  539. left: 0;
  540. bottom: 0;
  541. z-index: 9;
  542. // background-image: url(../../static/images/black_mask.png);
  543. background-size: 20rpx 44rpx;
  544. background-repeat: repeat-x;
  545. }
  546. .num-box {
  547. width: 80rpx;
  548. height: 40rpx;
  549. line-height: 40rpx;
  550. text-align: center;
  551. font-size: 24rpx;
  552. color: #FFFFFF;
  553. background: rgba(0, 0, 0, .7);
  554. border-radius: 20rpx;
  555. position: absolute;
  556. right: 40rpx;
  557. bottom: 34rpx;
  558. z-index: 10;
  559. }
  560. .cf-box {
  561. position: absolute;
  562. z-index: 10;
  563. left: 0;
  564. right: 0;
  565. top: calc(50% - 200rpx);
  566. bottom: calc(50% - 200rpx);
  567. background-color: rgba(0, 0, 0, 0.3);
  568. backdrop-filter: blur(2rpx);
  569. /* 背景模糊度 */
  570. display: flex;
  571. flex-direction: column;
  572. flex: 1;
  573. justify-content: center;
  574. align-items: center;
  575. color: #EDEEEF;
  576. .title {
  577. font-size: 40rpx;
  578. font-weight: bold;
  579. }
  580. .subTitle {
  581. font-size: 28rpx;
  582. font-weight: bold;
  583. margin-top: 10rpx;
  584. }
  585. }
  586. }
  587. .guige {
  588. padding: 24rpx;
  589. border-radius: 16rpx;
  590. background: #fff;
  591. width: auto;
  592. font-size: 24rpx;
  593. color: #222426;
  594. margin: 24rpx;
  595. .guige-gg {
  596. .gg-text {
  597. color: #898E91;
  598. margin-right: 40rpx;
  599. }
  600. }
  601. .safe-box {
  602. display: flex;
  603. align-items: center;
  604. padding-top: 24rpx;
  605. font-size: 24rpx;
  606. color: #222426;
  607. .text {
  608. color: #999999;
  609. margin-right: 40rpx;
  610. }
  611. .box {
  612. display: flex;
  613. align-items: center;
  614. image {
  615. width: 28rpx;
  616. height: 28rpx;
  617. margin-right: 10rpx;
  618. }
  619. view {
  620. display: flex;
  621. align-items: center;
  622. margin-right: 40rpx;
  623. &:last-child {
  624. margin-right: 0;
  625. image {
  626. margin-right: 0;
  627. }
  628. }
  629. }
  630. }
  631. }
  632. .popup-box {
  633. position: fixed;
  634. top: 0;
  635. right: 0;
  636. left: 0;
  637. bottom: 0;
  638. z-index: 999;
  639. display: flex;
  640. justify-content: center;
  641. align-items: flex-end;
  642. .info-mask {
  643. position: fixed;
  644. top: 0;
  645. right: 0;
  646. bottom: 0;
  647. left: 0;
  648. background-color: rgba($color: #000000, $alpha: 0.5);
  649. z-index: 999;
  650. }
  651. .info-form {
  652. z-index: 1000;
  653. width: 100%;
  654. display: flex;
  655. flex-direction: column;
  656. justify-content: center;
  657. align-items: center;
  658. padding: 0 30rpx 60rpx;
  659. background: #FFFFFF;
  660. border-radius: 40rpx;
  661. .top {
  662. display: flex;
  663. }
  664. .line {
  665. border-top: 1px solid #F1F1F1;
  666. width: 100%;
  667. }
  668. .title {
  669. padding: 30rpx;
  670. display: flex;
  671. justify-content: center;
  672. align-items: center;
  673. font-size: 36rpx;
  674. font-weight: bold;
  675. line-height: 44rpx;
  676. color: #222222;
  677. }
  678. .close {
  679. padding-top: 30rpx;
  680. position: absolute;
  681. right: 30rpx;
  682. }
  683. .form-box {
  684. width: 100%;
  685. padding-top: 30rpx;
  686. .form-item2 {
  687. padding-bottom: 30rpx;
  688. // display: flex;
  689. // align-items: flex-start;
  690. // border-bottom: 1px solid #F1F1F1;
  691. .form-item-box {
  692. display: flex;
  693. align-items: center;
  694. text {
  695. font-size: 28rpx;
  696. color: #222426;
  697. margin-left: 10rpx;
  698. font-weight: bold;
  699. }
  700. }
  701. .form-content {
  702. font-size: 24rpx;
  703. text-align: left;
  704. color: #626468;
  705. margin-top: 20rpx;
  706. line-height: 40rpx;
  707. }
  708. }
  709. }
  710. .btns {
  711. width: 100%;
  712. height: 120rpx;
  713. padding: 20rpx 30rpx;
  714. display: flex;
  715. align-items: center;
  716. justify-content: center;
  717. .sub-btn {
  718. width: 100%;
  719. height: 88rpx;
  720. line-height: 88rpx;
  721. text-align: center;
  722. font-size: 36rpx;
  723. font-weight: bold;
  724. color: #FFFFFF;
  725. background: #008FD3;
  726. border-radius: 44rpx;
  727. }
  728. }
  729. }
  730. }
  731. }
  732. .det-info {
  733. // background: #FFFFFF;
  734. // padding: 36rpx 30rpx 25rpx;
  735. background: #FFFFFF;
  736. padding: 24rpx;
  737. margin: 24rpx;
  738. border-radius: 16rpx;
  739. .price-box {
  740. display: flex;
  741. align-items: flex-end;
  742. justify-content: space-between;
  743. .price {
  744. display: flex;
  745. align-items: flex-end;
  746. .label {
  747. font-weight: 500;
  748. font-size: 24rpx;
  749. color: #FF5030;
  750. line-height: 1.3;
  751. margin-right: 10rpx;
  752. }
  753. .unit {
  754. font-size: 26rpx;
  755. font-weight: bold;
  756. color: #FF6633;
  757. line-height: 1.3;
  758. }
  759. .num {
  760. font-size: 48rpx;
  761. font-weight: bold;
  762. color: #FF5030;
  763. margin-right: 20rpx;
  764. line-height: 1;
  765. }
  766. .old {
  767. font-size: 24rpx;
  768. font-family: PingFang SC;
  769. font-weight: 400;
  770. // text-decoration: line-through;
  771. color: #898E91;
  772. margin-left: 10rpx;
  773. // line-height: 1.3;
  774. }
  775. }
  776. // .share-box{
  777. // width: 120rpx;
  778. // height: 46rpx;
  779. // border: 1px solid #0bb3f2;
  780. // border-radius: 23rpx;
  781. // display: flex;
  782. // align-items: center;
  783. // justify-content: center;
  784. // position: relative;
  785. // .text{
  786. // font-size: 26rpx;
  787. // font-family: PingFang SC;
  788. // font-weight: 500;
  789. // color: #0bb3f2;
  790. // }
  791. // image{
  792. // margin-left: 2rpx;
  793. // width: 25rpx;
  794. // height: 24rpx;
  795. // }
  796. // .share{
  797. // display: inline-block;
  798. // position: absolute;
  799. // top: 0;
  800. // left: 0;
  801. // width: 100%;
  802. // height: 100%;
  803. // opacity: 0;
  804. // }
  805. // }
  806. .spec {
  807. font-size: 24rpx;
  808. font-family: PingFang SC;
  809. font-weight: 500;
  810. color: #999999;
  811. line-height: 36rpx;
  812. }
  813. }
  814. // .name-box {
  815. // font-size: 32rpx;
  816. // font-family: PingFang SC;
  817. // font-weight: bold;
  818. // color: #111111;
  819. // line-height: 44rpx;
  820. // margin-top: 32rpx;
  821. // .tag {
  822. // display: inline-block;
  823. // padding: 2rpx 8rpx;
  824. // height: 32rpx;
  825. // background: #F5A623;
  826. // border-radius: 4rpx;
  827. // margin-right: 10rpx;
  828. // font-weight: 400;
  829. // font-size: 20rpx;
  830. // color: #FFFFFF;
  831. // line-height: 30rpx;
  832. // float: left;
  833. // margin-top: 7rpx;
  834. // }
  835. // }
  836. .intro {
  837. font-size: 26rpx;
  838. font-weight: 500;
  839. color: #999999;
  840. line-height: 36rpx;
  841. padding: 18rpx 0 23rpx;
  842. }
  843. .intro-box {
  844. display: flex;
  845. justify-content: space-between;
  846. align-items: center;
  847. padding: 20rpx;
  848. border-radius: 16rpx;
  849. background: #F5F7FA;
  850. width: auto;
  851. .title-1 {
  852. font-size: 24rpx;
  853. color: #222426;
  854. font-weight: bold;
  855. width: 40%;
  856. text-align: center;
  857. }
  858. .title-2 {
  859. font-size: 24rpx;
  860. color: #222426;
  861. font-weight: bold;
  862. display: block;
  863. }
  864. .intro-text {
  865. // padding: 0 20rpx;
  866. }
  867. .intro-text2 {
  868. width: 50%;
  869. }
  870. .intro-content {
  871. color: #898E91;
  872. font-size: 24rpx;
  873. }
  874. .line {
  875. width: 1px;
  876. height: 40rpx;
  877. background: #EDEEEF;
  878. margin: 0 20rpx;
  879. }
  880. }
  881. .safe-box {
  882. display: flex;
  883. align-items: center;
  884. padding-top: 24rpx;
  885. image {
  886. width: 20rpx;
  887. height: 24rpx;
  888. margin-right: 20rpx;
  889. }
  890. .text {
  891. font-size: 22rpx;
  892. font-weight: 500;
  893. color: #999999;
  894. line-height: 1;
  895. }
  896. .line {
  897. width: 1px;
  898. height: 23rpx;
  899. background: #EDEEEF;
  900. margin: 0 20rpx;
  901. }
  902. }
  903. }
  904. .inventor {
  905. height: 88rpx;
  906. padding: 0 39rpx 0 30rpx;
  907. margin-top: 10rpx;
  908. background: #FFFFFF;
  909. display: flex;
  910. align-items: center;
  911. justify-content: space-between;
  912. .left {
  913. display: flex;
  914. align-items: center;
  915. .head-box {
  916. margin-right: 27rpx;
  917. display: flex;
  918. align-items: center;
  919. .head {
  920. width: 48rpx;
  921. height: 48rpx;
  922. border-radius: 50%;
  923. overflow: hidden;
  924. box-shadow: 0 0 0 1px #fff;
  925. margin-right: -10rpx;
  926. image {
  927. width: 100%;
  928. height: 100%;
  929. }
  930. }
  931. }
  932. .num-box {
  933. font-size: 24rpx;
  934. font-weight: 500;
  935. color: #999999;
  936. .text {
  937. font-size: 24rpx;
  938. font-weight: 500;
  939. color: #999999;
  940. }
  941. }
  942. }
  943. .right {
  944. font-size: 24rpx;
  945. font-family: PingFang SC;
  946. font-weight: 500;
  947. color: #999999;
  948. .text {
  949. font-size: 24rpx;
  950. font-weight: 500;
  951. color: #666666;
  952. }
  953. }
  954. }
  955. .effect {
  956. box-sizing: border-box;
  957. padding: 20rpx 30rpx;
  958. background: #FFFFFF;
  959. font-size: 28rpx;
  960. font-weight: 500;
  961. color: #666666;
  962. line-height: 1.8;
  963. margin-top: 10rpx;
  964. display: flex;
  965. flex-direction: row;
  966. align-items: center;
  967. justify-content: space-between;
  968. .label {
  969. font-size: 28rpx;
  970. font-weight: 500;
  971. color: #111111;
  972. line-height: 1.8;
  973. }
  974. }
  975. .shop-box {
  976. // box-sizing: border-box;
  977. // padding: 20rpx 30rpx;
  978. // background: #FFFFFF;
  979. // font-size: 28rpx;
  980. // font-family: PingFang SC;
  981. // font-weight: 500;
  982. // color: #666666;
  983. // line-height: 1.8;
  984. // margin-top: 10rpx;
  985. // background: url(../../static/images/chu_query.png) no-repeat center center / cover;
  986. display: flex;
  987. justify-content: space-between;
  988. align-items: center;
  989. background: #FFFFFF;
  990. font-size: 28rpx;
  991. font-weight: 500;
  992. color: #666666;
  993. line-height: 1.8;
  994. padding: 24rpx;
  995. margin: 24rpx;
  996. border-radius: 16rpx;
  997. .logo {
  998. flex-shrink: 0;
  999. width: 100rpx;
  1000. height: 100rpx;
  1001. border-radius: 16rpx;
  1002. overflow: hidden;
  1003. image {
  1004. width: 100%;
  1005. height: 100%;
  1006. }
  1007. }
  1008. .txtBox {
  1009. flex: 1;
  1010. overflow: hidden;
  1011. margin: 0 30rpx;
  1012. display: flex;
  1013. flex-direction: column;
  1014. justify-content: space-between;
  1015. }
  1016. .name {
  1017. font-size: 32rpx;
  1018. font-weight: 600;
  1019. color: #333;
  1020. text-align: left;
  1021. overflow: hidden;
  1022. white-space: nowrap;
  1023. text-overflow: ellipsis;
  1024. }
  1025. .desc {
  1026. font-size: 24rpx;
  1027. font-weight: normal;
  1028. color: #222426;
  1029. text-align: left;
  1030. }
  1031. .goShop {
  1032. flex-shrink: 0;
  1033. width: 96rpx;
  1034. height: 56rpx;
  1035. background: #fff;
  1036. border-radius: 30rpx;
  1037. color: #008FD3;
  1038. font-size: 24rpx;
  1039. margin: 0;
  1040. border: 1px solid #008FD3;
  1041. padding: 0;
  1042. line-height: 56rpx;
  1043. display: flex;
  1044. align-items: center;
  1045. justify-content: center;
  1046. }
  1047. }
  1048. .tech-pBox {
  1049. box-sizing: border-box;
  1050. padding: 0rpx 0rpx;
  1051. background: #FFFFFF;
  1052. font-size: 28rpx;
  1053. font-family: PingFang SC;
  1054. font-weight: 500;
  1055. color: #666666;
  1056. .label {
  1057. font-weight: bold;
  1058. font-size: 26rpx;
  1059. color: #222426;
  1060. text-align: left;
  1061. padding: 24rpx 0;
  1062. }
  1063. .item {
  1064. border: 1px solid #fff;
  1065. border-radius: 12rpx;
  1066. padding: 30rpx;
  1067. border: 1px solid #EFF3F7;
  1068. display: flex;
  1069. align-items: center;
  1070. margin-bottom: 20rpx;
  1071. .price {
  1072. font-size: 42rpx;
  1073. font-weight: bold;
  1074. color: #FF6633;
  1075. display: flex;
  1076. flex: 1;
  1077. b {
  1078. font-size: 30rpx;
  1079. line-height: 46rpx;
  1080. margin-top: 14rpx;
  1081. }
  1082. }
  1083. .num {
  1084. font-size: 28rpx;
  1085. font-weight: normal;
  1086. color: #999;
  1087. width: 200rpx;
  1088. text-align: right;
  1089. }
  1090. .name {
  1091. max-width: 60%;
  1092. margin-right: 10rpx;
  1093. font-size: 28rpx;
  1094. font-weight: normal;
  1095. color: #333;
  1096. text-align: left;
  1097. overflow: hidden;
  1098. white-space: nowrap;
  1099. text-overflow: ellipsis;
  1100. }
  1101. image {
  1102. width: 100rpx;
  1103. height: 100rpx;
  1104. border-radius: 50%;
  1105. margin-right: 30rpx;
  1106. }
  1107. .tech-right {
  1108. flex: 1;
  1109. &-bottom {
  1110. color: #898E91;
  1111. font-size: 24rpx;
  1112. }
  1113. &-top {
  1114. display: flex;
  1115. align-items: flex-end;
  1116. margin-bottom: 10rpx;
  1117. .title-1 {
  1118. font-size: 32rpx;
  1119. color: #222426;
  1120. margin-right: 14rpx;
  1121. }
  1122. .title-2 {
  1123. font-weight: 400;
  1124. font-size: 24rpx;
  1125. color: #222426;
  1126. }
  1127. }
  1128. }
  1129. }
  1130. .hover {
  1131. border: 1rpx solid #008FD3;
  1132. background: #F0FAFF;
  1133. }
  1134. .shop-morebtn {
  1135. margin-top: 14rpx;
  1136. box-sizing: border-box;
  1137. padding: 12rpx 30rpx;
  1138. font-size: 28rpx;
  1139. font-weight: 500;
  1140. color: #111111;
  1141. background: #F7F7F7;
  1142. border-radius: 32rpx;
  1143. text-align: center;
  1144. text {
  1145. color: #999;
  1146. }
  1147. }
  1148. }
  1149. .shop-pBox {
  1150. box-sizing: border-box;
  1151. padding: 0rpx 0rpx;
  1152. background: #FFFFFF;
  1153. font-size: 28rpx;
  1154. font-family: PingFang SC;
  1155. font-weight: 500;
  1156. color: #666666;
  1157. .item {
  1158. border: 1px solid #fff;
  1159. border-radius: 12rpx;
  1160. padding: 18rpx 20rpx 24rpx;
  1161. .price {
  1162. font-size: 42rpx;
  1163. font-weight: bold;
  1164. color: #FF6633;
  1165. display: flex;
  1166. flex: 1;
  1167. .strong {
  1168. font-size: 30rpx;
  1169. line-height: 46rpx;
  1170. margin-top: 14rpx;
  1171. }
  1172. }
  1173. .num {
  1174. font-size: 28rpx;
  1175. font-weight: normal;
  1176. color: #999;
  1177. width: 200rpx;
  1178. text-align: right;
  1179. }
  1180. .name {
  1181. max-width: 60%;
  1182. margin-right: 10rpx;
  1183. font-size: 28rpx;
  1184. font-weight: normal;
  1185. color: #333;
  1186. text-align: left;
  1187. overflow: hidden;
  1188. white-space: nowrap;
  1189. text-overflow: ellipsis;
  1190. }
  1191. }
  1192. .hover {
  1193. border: 1rpx solid #FF6633;
  1194. }
  1195. .shop-morebtn {
  1196. margin-top: 14rpx;
  1197. box-sizing: border-box;
  1198. padding: 12rpx 30rpx;
  1199. font-size: 28rpx;
  1200. font-weight: 500;
  1201. color: #111111;
  1202. background: #F7F7F7;
  1203. border-radius: 32rpx;
  1204. text-align: center;
  1205. text {
  1206. color: #999;
  1207. }
  1208. }
  1209. }
  1210. .shop-pBox-name {
  1211. display: flex;
  1212. align-items: center;
  1213. justify-content: flex-start;
  1214. }
  1215. .storepopup {
  1216. padding: 40rpx 20rpx 20rpx 20rpx;
  1217. .storepopup-title {
  1218. text-align: center;
  1219. margin-bottom: 30rpx;
  1220. position: relative;
  1221. .close-icon {
  1222. width: 40rpx;
  1223. height: 40rpx;
  1224. position: absolute;
  1225. right: 0;
  1226. top: 50%;
  1227. transform: translate(0, -50%);
  1228. }
  1229. }
  1230. .storepopup-box {
  1231. height: 60vh;
  1232. }
  1233. }
  1234. .det-box {
  1235. // margin-top: 10rpx;
  1236. // padding: 40rpx 30rpx 130rpx 30rpx;
  1237. // background-color: #FFFFFF;
  1238. margin-top: 10rpx;
  1239. background-color: #FFFFFF;
  1240. padding: 24rpx;
  1241. margin: 24rpx 24rpx 175rpx 24rpx;
  1242. border-radius: 16rpx;
  1243. .title {
  1244. font-size: 32rpx;
  1245. font-weight: bold;
  1246. color: #333333;
  1247. line-height: 60rpx;
  1248. margin-bottom: 30rpx;
  1249. padding-bottom: 24rpx;
  1250. border-bottom: 1px solid #ECECEC;
  1251. }
  1252. .det-title {
  1253. display: flex;
  1254. align-items: center;
  1255. justify-content: space-between;
  1256. .tt {
  1257. font-size: 28rpx;
  1258. font-weight: bold;
  1259. color: #222426;
  1260. }
  1261. }
  1262. .det-right {
  1263. display: flex;
  1264. font-size: 24rpx;
  1265. color: #898E91;
  1266. align-items: center;
  1267. }
  1268. .det-table {
  1269. width: 100%;
  1270. margin: 24rpx 0;
  1271. background: #FFFFFF;
  1272. border-radius: 16rpx 16rpx 16rpx 16rpx;
  1273. border: 1rpx solid #ECECEC;
  1274. overflow: hidden;
  1275. font-size: 24rpx;
  1276. .row {
  1277. display: table-row;
  1278. }
  1279. .row:last-child .cell-1,
  1280. .row:last-child .cell-2 {
  1281. border-bottom: 0;
  1282. }
  1283. .cell {
  1284. display: table-cell;
  1285. padding: 24rpx;
  1286. &.cell-1 {
  1287. width: 30%;
  1288. text-align: center;
  1289. color: #626468;
  1290. background: #F5F7FA;
  1291. border-right: 1rpx solid #ECECEC;
  1292. border-bottom: 1rpx solid #ECECEC;
  1293. }
  1294. &.cell-2 {
  1295. color: #222426;
  1296. text-align: center;
  1297. border-bottom: 1rpx solid #ECECEC;
  1298. }
  1299. }
  1300. }
  1301. }
  1302. .btn-foot {
  1303. box-sizing: border-box;
  1304. width: 100%;
  1305. height: 151rpx;
  1306. background: #FFFFFF;
  1307. padding: 0 24rpx;
  1308. display: flex;
  1309. align-items: center;
  1310. justify-content: space-between;
  1311. position: fixed;
  1312. left: 0;
  1313. bottom: 0;
  1314. z-index: 99;
  1315. .menu-box {
  1316. display: flex;
  1317. align-items: center;
  1318. .item {
  1319. display: flex;
  1320. align-items: center;
  1321. flex-direction: column;
  1322. margin-right: 48rpx;
  1323. &:last-child {
  1324. margin-right: 0;
  1325. }
  1326. image {
  1327. width: 40rpx;
  1328. height: 40rpx;
  1329. margin-bottom: 10rpx;
  1330. }
  1331. .label {
  1332. font-size: 20rpx;
  1333. font-weight: 500;
  1334. color: #626468;
  1335. text-align: center;
  1336. }
  1337. }
  1338. }
  1339. .btn-box {
  1340. display: flex;
  1341. align-items: center;
  1342. .btn {
  1343. width: 200rpx;
  1344. height: 88rpx;
  1345. line-height: 88rpx;
  1346. text-align: center;
  1347. border-radius: 44rpx;
  1348. margin-left: 20rpx;
  1349. font-size: 28rpx;
  1350. font-weight: bold;
  1351. color: #FFFFFF;
  1352. &:first-child {
  1353. margin-left: 0;
  1354. }
  1355. &.cart {
  1356. background: #FF5030;
  1357. }
  1358. &.buy {
  1359. background: #008FD3;
  1360. }
  1361. }
  1362. }
  1363. }
  1364. .product-spec {
  1365. padding-bottom: 30rpx;
  1366. .pro-info {
  1367. display: flex;
  1368. align-items: center;
  1369. .img-box {
  1370. width: 200rpx;
  1371. height: 200rpx;
  1372. background: #FFFFFF;
  1373. border-radius: 16rpx;
  1374. overflow: hidden;
  1375. margin-right: 30rpx;
  1376. image {
  1377. width: 100%;
  1378. height: 100%;
  1379. }
  1380. }
  1381. .info-text {
  1382. height: 200rpx;
  1383. display: flex;
  1384. flex-direction: column;
  1385. justify-content: space-between;
  1386. .info-title {
  1387. font-family: PingFang SC;
  1388. font-weight: 600;
  1389. font-size: 28rpx;
  1390. color: #222426;
  1391. text-align: left;
  1392. }
  1393. .price {
  1394. display: flex;
  1395. align-items: flex-end;
  1396. .label {
  1397. font-weight: 500;
  1398. font-size: 24rpx;
  1399. color: #FF5030;
  1400. line-height: 1.3;
  1401. margin-right: 10rpx;
  1402. }
  1403. .unit {
  1404. font-size: 32rpx;
  1405. font-weight: bold;
  1406. color: #FF6633;
  1407. line-height: 1.2;
  1408. margin-right: 10rpx;
  1409. }
  1410. .num {
  1411. font-size: 50rpx;
  1412. font-weight: bold;
  1413. color: #FF6633;
  1414. line-height: 1;
  1415. }
  1416. }
  1417. .desc-box {
  1418. display: flex;
  1419. flex-direction: column;
  1420. padding-bottom: 9rpx;
  1421. .text {
  1422. font-size: 26rpx;
  1423. font-weight: 500;
  1424. color: #999999;
  1425. margin-top: 27rpx;
  1426. line-height: 1;
  1427. &:first-child {
  1428. margin-top: 0;
  1429. }
  1430. }
  1431. }
  1432. }
  1433. }
  1434. .spec-box {
  1435. padding-top: 50rpx;
  1436. .title {
  1437. font-size: 26rpx;
  1438. font-weight: bold;
  1439. color: #111111;
  1440. line-height: 1;
  1441. }
  1442. .spec-list {
  1443. display: flex;
  1444. flex-wrap: wrap;
  1445. margin-top: 30rpx;
  1446. .item {
  1447. box-sizing: border-box;
  1448. height: 64rpx;
  1449. padding: 0 30rpx;
  1450. line-height: 64rpx;
  1451. font-size: 24rpx;
  1452. font-weight: 500;
  1453. color: #111111;
  1454. background: #F7F7F7;
  1455. border: 1px solid #F7F7F7;
  1456. border-radius: 32rpx;
  1457. margin-right: 20rpx;
  1458. margin-bottom: 30rpx;
  1459. &.active {
  1460. background: #F1FFFE;
  1461. border: 1px solid #008FD3;
  1462. color: #008FD3;
  1463. }
  1464. }
  1465. }
  1466. }
  1467. .price-num {
  1468. display: flex;
  1469. align-items: center;
  1470. justify-content: space-between;
  1471. margin-top: 14rpx;
  1472. .label {
  1473. font-size: 26rpx;
  1474. font-weight: bold;
  1475. color: #111111;
  1476. }
  1477. // .num-box {
  1478. // display: flex;
  1479. // align-items: center;
  1480. // .img-box {
  1481. // width: 60rpx;
  1482. // height: 60rpx;
  1483. // border: 1px solid #dddddd;
  1484. // display: flex;
  1485. // align-items: center;
  1486. // justify-content: center;
  1487. // image {
  1488. // width: 25rpx;
  1489. // height: 25rpx;
  1490. // }
  1491. // }
  1492. // input {
  1493. // width: 60rpx;
  1494. // height: 60rpx;
  1495. // line-height: 60rpx;
  1496. // font-size: 28rpx;
  1497. // font-weight: 500;
  1498. // color: #111111;
  1499. // // border-radius: 4rpx;
  1500. // border-top: 1px solid #dddddd;
  1501. // border-bottom: 1px solid #dddddd;
  1502. // text-align: center;
  1503. // // margin: 0 16rpx;
  1504. // }
  1505. // }
  1506. }
  1507. .sub-btn {
  1508. width: 100%;
  1509. height: 88rpx;
  1510. line-height: 88rpx;
  1511. text-align: center;
  1512. font-size: 32rpx;
  1513. font-weight: bold;
  1514. color: #FFFFFF;
  1515. background: #008FD3;
  1516. border-radius: 44rpx;
  1517. margin-top: 30rpx;
  1518. // margin-bottom: 30rpx;
  1519. }
  1520. }
  1521. .contact-btn {
  1522. display: inline-block;
  1523. position: absolute;
  1524. top: 0;
  1525. left: 0;
  1526. width: 100%;
  1527. height: 100%;
  1528. opacity: 0;
  1529. z-index: 9999;
  1530. }
  1531. .loadding {
  1532. background-color: #fff;
  1533. display: flex;
  1534. flex-direction: column;
  1535. align-items: center;
  1536. justify-content: center;
  1537. position: absolute;
  1538. top: 0;
  1539. left: 0;
  1540. width: 100%;
  1541. height: 100%;
  1542. z-index: 9999;
  1543. image {
  1544. border-radius: 50%;
  1545. animation: load linear 1s infinite;
  1546. width: 120rpx;
  1547. height: 120rpx;
  1548. }
  1549. .text {
  1550. font-size: 28rpx;
  1551. margin-top: 20rpx;
  1552. }
  1553. }
  1554. .form-item {
  1555. padding: 30rpx 0;
  1556. display: flex;
  1557. align-items: flex-start;
  1558. border-bottom: 1px solid #F1F1F1;
  1559. &:last-child {
  1560. border-bottom: none;
  1561. }
  1562. .label {
  1563. width: 180rpx;
  1564. text-align: left;
  1565. font-size: 30rpx;
  1566. line-height: 44rpx;
  1567. font-weight: 500;
  1568. color: #222222;
  1569. flex-shrink: 0;
  1570. }
  1571. input {
  1572. text-align: left;
  1573. }
  1574. .form-input {
  1575. font-size: 30rpx;
  1576. font-weight: 500;
  1577. color: #999999;
  1578. text-align: left;
  1579. }
  1580. .form-textarea {
  1581. font-size: 30rpx;
  1582. color: #999999;
  1583. height: 100rpx;
  1584. padding: 4rpx 0;
  1585. }
  1586. .birth-picker {
  1587. flex: 1;
  1588. display: flex;
  1589. align-items: center;
  1590. .right-box {
  1591. width: 100%;
  1592. display: flex;
  1593. align-items: center;
  1594. .input-box {
  1595. width: 470rpx;
  1596. }
  1597. .arrow {
  1598. width: 13rpx;
  1599. height: 23rpx;
  1600. margin-left: 20rpx;
  1601. }
  1602. }
  1603. }
  1604. }
  1605. </style>