detail.html 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>详情</title>
  6. <link rel="stylesheet" href="../assets/css/index.css">
  7. <link rel="stylesheet" href="../assets/css/detail.css">
  8. </head>
  9. <body>
  10. <div class="navigation-bar">
  11. <div class="nav-body">
  12. <!-- <router-link to="/" class="nav-logo">-->
  13. <div class="nav-logo">
  14. <img src="../assets/image/logo.png" alt="logo" onclick="JumpRouter('/','')"/>
  15. </div>
  16. <!-- </router-link>-->
  17. <div class="nav-search">
  18. <form action="/search" target="_blank">
  19. <div class="nav-search-div">
  20. <input class="search-input" type="text" name="key" placeholder="搜索商品名称"/>
  21. </div>
  22. <!-- 点击-->
  23. <div class="search-btn">
  24. <div class="search-btn-icon">
  25. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-6fbb019e="">
  26. <path fill="currentColor"
  27. d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"></path>
  28. </svg>
  29. </div>
  30. </div>
  31. </form>
  32. </div>
  33. <div class="nav-user">
  34. <!-- todo 头像处理-->
  35. <div class="nav-user-icon" @click="openView()">
  36. <div class="nav-user-icon-bg">
  37. <el-icon size="24">
  38. <User/>
  39. </el-icon>
  40. <img :src="userInfo.avatar" v-else alt="6"/>
  41. </div>
  42. <span>{1{ isLogin ? userInfo.name : "登录" }1}</span>
  43. </div>
  44. <div class="login-body" style="display: none">
  45. <div class="login-center" style="display: none">
  46. <div class="login-content">
  47. <div class="login-image" :style="loginImageStyle"></div>
  48. <form>
  49. <div class="login-from">
  50. <div class="login-select">
  51. <div class=" login-select-item "
  52. :class="selectType=='phone'?'select-item':''"
  53. @click="setType('phone')">
  54. <span>手机号登录</span>
  55. </div>
  56. <div class=" login-select-item "
  57. :class="selectType=='email'?'select-item':''"
  58. @click="setType('email')">
  59. <span>邮箱登录</span>
  60. </div>
  61. <div class=" login-select-item "
  62. :class="selectType=='wx'?'select-item':''"
  63. @click="setType('wx')">
  64. <span>微信扫码登录</span>
  65. </div>
  66. <!--特效白条-->
  67. <div class="select-item2" :style="getSelectTypeStyle()"></div>
  68. </div>
  69. <div class="login-type-phone" v-show="selectType=='phone'||selectType=='email'">
  70. <div class="login-phone">
  71. <div class="login-phone-input">
  72. <input name="username" v-model="username"
  73. autocomplete="off"
  74. :placeholder="selectType=='phone'?'手机号码':'邮箱'"/>
  75. </div>
  76. </div>
  77. <div class="login-phone-code" v-if="selectType=='phone'">
  78. <div class="login-phone-code-input">
  79. <input name="username" v-model="password"
  80. autocomplete="off"
  81. placeholder="验证码"/>
  82. </div>
  83. <div class="login-phone-code-btn" @click="getCode()">
  84. {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
  85. </div>
  86. </div>
  87. <div class="login-email" v-if="selectType=='email'">
  88. <div class="login-email-input">
  89. <input name="username" v-model="password"
  90. autocomplete="off"
  91. type="password"
  92. placeholder="密码"/>
  93. </div>
  94. </div>
  95. <div class="login-btn" @click="login()">
  96. <div class="login-btn-div">登录</div>
  97. </div>
  98. </div>
  99. <div class="login-type-wx" v-show="selectType=='wx'">
  100. <div class="login-wx-refresh" @click="refreshWxCode()">
  101. <div class="login-wx-refresh-icon"
  102. style="transform: translateY(15%)">
  103. <el-icon size="25" :class="refreshWxCodeState?'is-loading':''">
  104. <refresh/>
  105. </el-icon>
  106. </div>
  107. <div class="login-wx-refresh-text">
  108. <span style="line-height: 25px">刷新二维码</span>
  109. </div>
  110. </div>
  111. <div class="login-wx-tip">
  112. <span>微信登录</span>
  113. </div>
  114. <div class="login-wx-image"></div>
  115. <div class="login-wx-tip">
  116. <span>请使用微信扫码登录</span>
  117. </div>
  118. </div>
  119. <span class="login-register-btn"
  120. v-if="selectType!=='wx'"
  121. @click="setShowRegister('register')">注册</span>
  122. </div>
  123. </form>
  124. </div>
  125. </div>
  126. <div class="register-center" style="display: none">
  127. <div class="register-content">
  128. <form>
  129. <div class="register-content-title">
  130. 注册
  131. </div>
  132. <div class="register-content-input">
  133. <k-k-c-input name="username" @binding="setUsername" :text="username"
  134. placeholder="请输入邮箱" type="text"/>
  135. </div>
  136. <div class="register-content-input">
  137. <k-k-c-input name="password" @binding="setPassword" :text="password"
  138. type="password" placeholder="请输入密码"/>
  139. </div>
  140. <div class="register-content-input">
  141. <k-k-c-input name="username" @binding="setRequirePassword" :text="requirePassword"
  142. type="password" placeholder="请输入密码"/>
  143. </div>
  144. <div class="register-content-input">
  145. <k-k-c-input name="username" @binding="setPhone" :text="phone"
  146. placeholder="请输入手机号" type="text"/>
  147. </div>
  148. <div class="register-content-code">
  149. <div class="register-content-code-input">
  150. <k-k-c-input name="username" @binding="setCode" :text="code"
  151. placeholder="请输入手机号" type="text"/>
  152. </div>
  153. <div class="register-content-code-btn" @click="sendCode()">
  154. {1{ awaitCode > 0 ? awaitCode + 's' : '发送验证码' }1}
  155. </div>
  156. </div>
  157. <div class="register-content-submit" @click="register()">
  158. 注册
  159. </div>
  160. </form>
  161. </div>
  162. </div>
  163. <div class="login-body-shield" @click="showViewType=''"></div>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. <div class="detail">
  169. <!-- 路由地址栏-->
  170. <RouterJumpBar v-model:nowRouterName="detailInfo.sku.skuName"/>
  171. <div class="goods-show">
  172. <div class="goods-show-info">
  173. <div class="goods-show-body">
  174. <div class="goods-show-img">
  175. <!-- <img src="../assets/goods-img.jpg" alt="" width="180" height="240"/>-->
  176. <img src="{{.sku.skuImage}}" alt="" width="180" height="240"/>
  177. </div>
  178. <div class="goods-show-text">
  179. <div class="goods-show-title">
  180. {{ .goods.goodsName }}
  181. </div>
  182. <div class="goods-show-advantages">
  183. {{range $tag := .tags}}
  184. {{if $tag}}
  185. <div class="goods-show-advantage goods-show-advantage-icon">
  186. <img src="{{$tag.iconUrl}}">
  187. {{else if eq $tag ""}}
  188. <div class="goods-show-advantage goods-show-advantage-icon">
  189. <img src="{{$tag.iconUrl}}">
  190. {{else}}
  191. <div class="goods-show-advantage goods-show-advantage-not-icon">
  192. {{end}}
  193. <div class="goods-show-tag">
  194. <div class="goods-show-name">
  195. {{ $tag.name }}
  196. </div>
  197. <div class="goods-show-desc">
  198. {{ $tag.tag }}
  199. </div>
  200. </div>
  201. </div>
  202. <!-- </template>-->
  203. {{end}}
  204. </div>
  205. <div class="goods-show-des">
  206. </div>
  207. </div>
  208. </div>
  209. <div class="goods-show-count">
  210. <div class="goods-show-price-text">
  211. <span>近30天销量:</span>
  212. <span>{{ .goods.salesVolume }}</span>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. <div class="goods-info">
  218. <div class="info-left">
  219. {{if .areas}}
  220. <div class="info-left-select-btns">
  221. {{$skuAreaId := .sku.commodityAreaId}}
  222. {{range $area := .areas}}
  223. {{if eq $skuAreaId $area.id}}
  224. <div class="info-left-select-btn"
  225. areaId="{{$area.id}}"
  226. onclick="GetAreaById({{$area.id}})"
  227. style="background-color: rgb(199, 199, 199);">
  228. <span>{{ $area.commodityAreaName }}</span>
  229. </div>
  230. {{else}}
  231. <div class="info-left-select-btn"
  232. areaId="{{$area.id}}"
  233. onclick="GetAreaById({{$area.id}})">
  234. <span>{{ $area.commodityAreaName }}</span>
  235. </div>
  236. {{end}}
  237. {{end}}
  238. </div>
  239. {{end}}
  240. <div class="info-left-select-param">
  241. {{$goodsSku := .sku}}
  242. {{range $sku := .skus}}
  243. {{if eq $sku.commodityAreaId $goodsSku.commodityAreaId}}
  244. <div class="info-left-select-param-btn"
  245. onclick="RouterJumpId({{$sku.id}})" areaId="{{$sku.commodityAreaId}}">
  246. <div class="ilspb-selector">
  247. <svg data-v-1f073385="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
  248. {{if ne $sku.id $goodsSku.id}}
  249. style="display: none"
  250. {{end}}>
  251. <path fill="currentColor"
  252. d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496z"></path>
  253. </svg>
  254. </div>
  255. <span>{{ $sku.skuName }}</span>
  256. <div class="ilspb-tag">
  257. ¥{{ $sku.price }}
  258. </div>
  259. </div>
  260. {{else}}
  261. <div class="info-left-select-param-btn"
  262. onclick="RouterJumpId({{$sku.id}})"
  263. areaId="{{$sku.commodityAreaId}}" style="display: none">
  264. <div class="ilspb-selector">
  265. <svg data-v-1f073385="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
  266. {{if ne $sku.id $goodsSku.id}}
  267. style="display: none"
  268. {{end}}
  269. >
  270. <path fill="currentColor"
  271. d="M77.248 415.04a64 64 0 0 1 90.496 0l226.304 226.304L846.528 188.8a64 64 0 1 1 90.56 90.496l-543.04 543.04-316.8-316.8a64 64 0 0 1 0-90.496z"></path>
  272. </svg>
  273. </div>
  274. <span>{{ $sku.skuName }}</span>
  275. <div class="ilspb-tag">
  276. ¥{{ $sku.price }}
  277. </div>
  278. </div>
  279. {{end}}
  280. {{end}}
  281. </div>
  282. <div class="info-left-des">
  283. <div class="des-tags">
  284. <div class="des-tag" :class="selectArticleType==0?'des-select-tag':''"
  285. @click="selectArticleType=0">
  286. 商品介绍
  287. </div>
  288. <!-- <div class="des-tag" :class="selectArticleType==1?'des-select-tag':''" @click="selectArticleType=1">-->
  289. <!-- 常见问题-->
  290. <!-- </div>-->
  291. </div>
  292. <div class="info-introduction">
  293. {{range $index, $introduction := .introductions}}
  294. {{if eq $index 0}}
  295. {{ $introduction.goodsArticle | safeHTML}}
  296. {{end}}
  297. {{end}}
  298. </div>
  299. <div class="info-question" v-show="selectArticleType==1"></div>
  300. </div>
  301. </div>
  302. <div class="info-right">
  303. <div class="info-right-price-calc">
  304. <div class="info-right-purchase-count">
  305. <!-- 购买数量 -->
  306. <div class="irpc-font">购买数量</div>
  307. <!-- 数量按钮-->
  308. <div class="irpc-count-button">
  309. <div class="irpc-count-button-minus" onclick="purchaseQuantityMinus()">-</div>
  310. <div class="irpc-count-button-input">
  311. <input id="irpc-input" value="1"/>
  312. </div>
  313. <div class="irpc-count-button-add" onclick="purchaseQuantityAdd()">+</div>
  314. </div>
  315. </div>
  316. <div class="info-right-total-purchase-price">
  317. <div class="price">
  318. <div class="price-name" style="font-size: 20px;color: #333333">单价</div>
  319. <div class="price-number">
  320. {{ if lt .sku.historicalPrices .sku.price}}
  321. <div class="price-original">
  322. {{ .sku.historicalPrices }}
  323. </div>
  324. {{end}}
  325. <div class="price-value" style="font-size: 20px">{{ .sku.price }}</div>
  326. </div>
  327. </div>
  328. <div class="price">
  329. <div class="price-name">总价</div>
  330. <div class="price-number">
  331. {{if lt .sku.historicalPrices .sku.price}}
  332. <div class="price-original" id="price-calc-historical-price">
  333. 0
  334. </div>
  335. {{end}}
  336. <div class="price-value" id="price-calc-price">
  337. 0
  338. </div>
  339. </div>
  340. </div>
  341. <div class="purchase-button">
  342. <div class="purchase-button-btn" onclick="orderSubmit()">
  343. 立即购买
  344. </div>
  345. </div>
  346. </div>
  347. <!-- TODO 1-->
  348. <div class="order-buy-curtain" id="order-buy-curtain" style="">
  349. <div class="order-buy-body">
  350. <div class="order-buy-title">订单详情</div>
  351. <div class="order-buy-close" onclick="closeView()">
  352. <span style="font-size: 20px; cursor: pointer;">&times;</span>
  353. </div>
  354. <div class="order-body">
  355. <div class="order-buy-pay">
  356. <div class="order-buy-pay-list">
  357. <div class="order-buy-pay-item" onclick="selectPayMethod(0)" id="pay-wx">
  358. <div class="order-buy-pay-wx">
  359. <div class="order-buy-pay-name">微信</div>
  360. <div class="order-buy-pay-tip">+20%手续费</div>
  361. </div>
  362. </div>
  363. <div class="order-buy-pay-item" onclick="selectPayMethod(1)" id="pay-zfb">
  364. <div class="order-buy-pay-zfb">
  365. <div class="order-buy-pay-name">支付宝</div>
  366. <div class="order-buy-pay-tip">随机立减最高16.8元</div>
  367. </div>
  368. </div>
  369. <div class="order-buy-pay-item" onclick="selectPayMethod(2)" id="pay-test">
  370. <div class="order-buy-pay-py">
  371. <div class="order-buy-pay-name">Test 支付</div>
  372. <div class="order-buy-pay-tip">免费,测试专用</div>
  373. </div>
  374. </div>
  375. </div>
  376. <div class="order-buy-pay-select" id="pay-select"></div>
  377. <div class="order-buy-pay-body">
  378. <div class="pay-body-qrcode">
  379. <div id="test-purchase" style="display: none;" onclick="orderTest()">
  380. 假装购买
  381. </div>
  382. </div>
  383. <div class="pay-body-info">
  384. <div class="pay-body-info-title">应付金额</div>
  385. <div class="pay-body-info-amount">{{.NowSku.Price}} * {{.Count}}</div>
  386. </div>
  387. <div class="pay-body-tip">
  388. <span>购买即同意</span>
  389. <span class="pay-body-tip-line">《购买协议》</span>
  390. </div>
  391. </div>
  392. </div>
  393. <div class="order-buy-info">
  394. <div class="order-buy-info-body">
  395. <div class="order-buy-info-title">订单信息</div>
  396. <div class="order-buy-info-data">
  397. <div class="order-image">
  398. <img src="{{.sku.skuImage}}" alt="图片"/>
  399. </div>
  400. <div class="order-name">{{.goods.goodsName}}</div>
  401. </div>
  402. <div class="order-data">
  403. <div class="order-data-item">
  404. <div class="order-data-item-name">类型</div>
  405. <div class="order-data-item-value">{{.sku.skuName}}</div>
  406. </div>
  407. <div class="order-data-item">
  408. <div class="order-data-item-name">数量</div>
  409. <div class="order-data-item-value">{{.Count}}!!</div>
  410. </div>
  411. <div class="order-data-item">
  412. <div class="order-data-item-name">单价</div>
  413. <div class="order-data-item-value">
  414. <div class="value-delete-line">{{.sku.historicalPrices}}</div>
  415. <div class="value-now">{{.sku.price}}</div>
  416. </div>
  417. </div>
  418. <div class="order-data-item">
  419. <div class="order-data-item-name">总计</div>
  420. <div class="order-data-item-value">
  421. <div class="value-delete-line">{{.NowSku.HistoricalPrices}} * {{.Count}}</div>
  422. <div class="value-now">{{.NowSku.Price}} * {{.Count}}</div>
  423. </div>
  424. </div>
  425. </div>
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. </div>
  431. </div>
  432. <div class="info-recommend">
  433. <div class="info-recommend-title">
  434. 相关推荐
  435. </div>
  436. <div class="info-recommend-items">
  437. {{range .recommendedGoods}}
  438. <div class="info-recommend-item" onclick="RouterJumpId({{.id}})">
  439. <div class="recommend-item-img">
  440. <img src="{{.skuImage}}" alt="图片"/>
  441. </div>
  442. <div class="recommend-item-name">
  443. {{ .skuName }} {{.id }}
  444. </div>
  445. </div>
  446. {{end}}
  447. </div>
  448. </div>
  449. </div>
  450. </div>
  451. </div>
  452. </div>
  453. {{toJson .sku}}
  454. <div class="bottom-bar">
  455. <!-- 合作伙伴-->
  456. <div class="partners">
  457. <div class="partners-line">
  458. <ul>
  459. <li>
  460. <img style="transform: rotate(180deg);"
  461. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
  462. </li>
  463. <!-- <li v-for="index in 9"><div><img src="../assets/steam-partners.png" alt=""></div></li>-->
  464. <li>
  465. <div><img src="../assets/image/footer/footer-slider-steam.png" alt=""></div>
  466. </li>
  467. <li>
  468. <div><img src="../assets/image/footer/footer-slider-google.png" alt=""></div>
  469. </li>
  470. <li>
  471. <div><img src="../assets/image/footer/footer-slider-tencent.png" alt=""></div>
  472. </li>
  473. <li>
  474. <div><img src="../assets/image/footer/footer-slider-microsoft.png" alt=""></div>
  475. </li>
  476. <li>
  477. <div><img src="../assets/image/footer/footer-slider-garena.png" alt=""></div>
  478. </li>
  479. <li>
  480. <div><img src="../assets/image/footer/footer-slider-ea.png" alt=""></div>
  481. </li>
  482. <li>
  483. <div><img src="../assets/image/footer/footer-slider-riot.png" alt=""></div>
  484. </li>
  485. <li>
  486. <div><img src="../assets/image/footer/footer-slider-pubg.png" alt=""></div>
  487. </li>
  488. <li>
  489. <div><img src="../assets/image/footer/footer-slider-ubisoft.png" alt=""></div>
  490. </li>
  491. <li>
  492. <img
  493. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
  494. </li>
  495. </ul>
  496. </div>
  497. <!-- 服务支持-->
  498. <div class="partners-service-guarantee">
  499. <div class="service-guarantee">
  500. <div class="sg-icon" style="background: rgb(225, 222, 250);">
  501. <img
  502. class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
  503. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEftl0FO21AQhv+ZOBWtVDXLgE1wd1BQ+wLquuYE0BM0nKBwg9yg9AZwgnKDuPsWLBVaujOJTdg1Wwj2VM9JIIQ4iVMhNn1ZxFLezHz+Z97MC+GRF/1LfKu46AhRLWz+mtrP1IYa3CquOGCpBecnU/sZa2jbqqCD+b7XGlRrHIBdVLZ/4fmjVB4LUJp7XQXxBuexPggxKgWmuawYRi3G5U4Ynu6lQYwFsAt24frZc5cpJ4MQlrXiSBTdqwEdPEf5mgid5fLiDFOvBzQWQG/UaYjacAkknJcbJSxLOYiuakHz540f01SKITWAxwbXvicCuIUQl8A3EBqsfdmuhM2TXb1HBzfYqEGiMzJGv3kmBXqbO0qQVmKvHh4mQftXyVS7ROyQEY+Uvd9mYgUGg9nmWxVTtAHEYAP7vj+62qcuwjTDeauslVAQaQGyEBPWg8Bzsza2oQqYs8vbnHuyAZGOP+psY1DrLDh8r581gP5uBEdO51lajcDb7KRJvoAY+qMVihM/AjB9bjS8g7EpmJ9b2iR+qrTx7WLto9XLfT9AyVqtxnLlBOGxk3TIuVdV5pl7YjBi1x9Qaeoa6KQArXpwtDkIkCUNUwOUzFUfhL16cFgtWaoqAqcReokCWdZUAPNzy3tExuZVdKkuLk79TrvOfQDR3ZYr5NfD7/ujgFIBdDslkY1+4xiRx8LbxHkHiLYa4UkSUNcM88x2r2J06ekeJ8A7SOzVQ6+c+RiWrPIBBEoIyTQjQInICyD6KpFUg4vjsUfONpWKiY5EZKsRekMHUqoCC1bZFZCrc9w7diTk1cPD7Sw5XrBWXUHs1gMv8TO4sgFAUh2lQS1YayIiO8Nad1fZ4aZDFcgIoJuSXBt/CFj3g29DU/agCuj7AiNf42t5mXYzyghwWxOT1EHS0pk/NcIfqXFSf+gOm7tF2FeUkwBY5vIuYqigeZLaoB4WYHbR1cc4PD+tZO4D9xQwlR6/fj08SnU2GMSaXWoJ4mrY/H3v8tLbm6pAyVo7gMgbIfH1WCaCAqgAiSpxJD7QTs0CMRcEqBAZ6+3oKmnXmRUoFhdtg7n7tt0mK6T/I3xMbpJ6xHfvCYlzPfN7ryPJz2eUk0oQnI7smFMNo0kKcNI9/wEeXYG/2/HLMDfFEZMAAAAASUVORK5CYII="
  504. draggable="false">
  505. </div>
  506. <div class="sg-info">
  507. <div>自动发货</div>
  508. <div>提供最快发货</div>
  509. </div>
  510. </div>
  511. <div class="service-guarantee">
  512. <div class="sg-icon" style="background: rgb(234, 217, 247);">
  513. <img
  514. class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
  515. src="../assets/image/footer/footer-promise-2.png"
  516. draggable="false">
  517. </div>
  518. <div class="sg-info">
  519. <div>正版保障</div>
  520. <div>官方正版采购,安全保障</div>
  521. </div>
  522. </div>
  523. <div class="service-guarantee">
  524. <div class="sg-icon" style="background: rgb(245, 221, 231);">
  525. <img
  526. class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
  527. src="../assets/image/footer/footer-promise-3.png"
  528. draggable="false">
  529. </div>
  530. <div class="sg-info">
  531. <div>客户服务</div>
  532. <div>提供专业的客服咨询</div>
  533. </div>
  534. </div>
  535. <div class="service-guarantee">
  536. <div class="sg-icon" style="background: rgb(226, 235, 230);">
  537. <img
  538. class="webuff-image__StyledImagesContainer-sc-1seo15q-1 iptopt"
  539. src="../assets/image/footer/footer-promise-4.png"
  540. draggable="false">
  541. </div>
  542. <div class="sg-info">
  543. <div>100%满意度</div>
  544. <div>给予您满意的购物体验</div>
  545. </div>
  546. </div>
  547. </div>
  548. </div>
  549. <div class="bottom-bar-about">
  550. <div class="bottom-bar-about-left">
  551. <div class="about-contact about-row">
  552. <div class="about-row-title">联系我们</div>
  553. <div class="about-row-item">平日 9:30 - 24:00</div>
  554. <div class="about-row-item">周末 9:30 - 24:00</div>
  555. <div class="about-row-imgs">
  556. <img src="../assets/image/footer/footer-about-1.png"/>
  557. <img src="../assets/image/footer/footer-about-2.png"/>
  558. <img src="../assets/image/footer/footer-about-3.png"/>
  559. <img src="../assets/image/footer/footer-about-4.png"/>
  560. </div>
  561. </div>
  562. <div class="about-me about-row">
  563. <div class="about-row-title">关于我们</div>
  564. <div class="about-row-item">关于我们</div>
  565. <div class="about-row-item">联系我们</div>
  566. <div class="about-row-item">条款与条件</div>
  567. <div class="about-row-item">隐私和Cookie</div>
  568. </div>
  569. <div class="about-issue about-row">
  570. <div class="about-row-title">常见问题</div>
  571. <div class="about-row-item">帮助中心</div>
  572. <div class="about-row-item">售后服务</div>
  573. <div class="about-row-item">关于退款</div>
  574. <div class="about-row-item">关于发货</div>
  575. </div>
  576. </div>
  577. <div class="bottom-bar-about-right">
  578. <div class="about-my-use about-row-title">
  579. 我们使用
  580. </div>
  581. <div class="my-user-images">
  582. <img src="../assets/image/footer/footer-myuse-0.png"/>
  583. <img src="../assets/image/footer/footer-myuse-1.png"/>
  584. <img src="../assets/image/footer/footer-myuse-2.png"/>
  585. <img src="../assets/image/footer/footer-myuse-3.png"/>
  586. <img src="../assets/image/footer/footer-myuse-4.png"/>
  587. <img src="../assets/image/footer/footer-myuse-5.png"/>
  588. <img src="../assets/image/footer/footer-myuse-6.png"/>
  589. <img src="../assets/image/footer/footer-myuse-7.png"/>
  590. <img src="../assets/image/footer/footer-myuse-8.png"/>
  591. <img src="../assets/image/footer/footer-myuse-9.png"/>
  592. <img src="../assets/image/footer/footer-myuse-10.png"/>
  593. <img src="../assets/image/footer/footer-myuse-11.png"/>
  594. <img src="../assets/image/footer/footer-myuse-12.png"/>
  595. <img src="../assets/image/footer/footer-myuse-13.png"/>
  596. <img src="../assets/image/footer/footer-myuse-14.png"/>
  597. <img src="../assets/image/footer/footer-myuse-15.png"/>
  598. </div>
  599. </div>
  600. </div>
  601. <div class="bottom-bar-active">
  602. <img src="../assets/image/footer/footer-active-0.png"/>
  603. <img src="../assets/image/footer/footer-active-1.png"/>
  604. <img src="../assets/image/footer/footer-active-2.png"/>
  605. <img src="../assets/image/footer/footer-active-3.png"/>
  606. <img src="../assets/image/footer/footer-active-4.png"/>
  607. </div>
  608. <div class="footer-about-box">
  609. <img src="../assets/image/logo.png" width="130" height="35">
  610. </div>
  611. <div class="footer-about-app">
  612. <img src="../assets/image/footer/footer-app-0.png"/>
  613. <img src="../assets/image/footer/footer-app-1.png"/>
  614. </div>
  615. <!-- 备案-->
  616. <div class="filing">
  617. <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
  618. </div>
  619. </div>
  620. </body>
  621. <script src="../assets/js/Detail.js"></script>
  622. <script>
  623. let skuData = JSON.parse("{{toJson .sku}}")
  624. let skuHistoricalPrice = Number("{{.sku.price}}")
  625. let skuPrice = Number("{{.sku.price}}")
  626. init(skuHistoricalPrice, skuPrice)
  627. </script>
  628. </html>