shopDetail.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781
  1. <template>
  2. <view class="center">
  3. <view class="store-info flex">
  4. <view class="store-top flex">
  5. <image class="simage" :src="info.image" mode=""></image>
  6. <view class="stop-main">
  7. <view class="stop-title">{{ info.name }}</view>
  8. <view class="stop-address">
  9. <image class="mrt-image" src="https://hy.liuniu946.com/app/index/index10.png" mode=""></image>
  10. <view class="mrt-font">距离您{{ info.jl }}KM</view>
  11. </view>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="store-item">
  16. <image class="store-image1" src="https://hy.liuniu946.com/app/img/store2.png" mode=""></image>
  17. <view class="store-font">营业时间:{{ info.day_time }}</view>
  18. </view>
  19. <view class="store-item" v-if="info.phone">
  20. <image class="store-image2" src="https://hy.liuniu946.com/app/img/store3.png" mode=""></image>
  21. <view class="store-font">预约电话:{{ info.phone }}</view>
  22. </view>
  23. <view class="store-item">
  24. <image class="store-image3" src="https://hy.liuniu946.com/app/index/index10.png" mode=""></image>
  25. <view class="store-font">门店地址:{{ info.detailed_address }}</view>
  26. </view>
  27. <view class="store-item">
  28. <image class="store-image1" src="https://hy.liuniu946.com/app/img/store2.png" mode=""></image>
  29. <view class="store-font">商家介绍:{{ info.introduction }}</view>
  30. </view>
  31. <view class="store-main" v-if="info.slider_image != null">
  32. <view class="smain-title">店内照片</view>
  33. <scroll-view class="scroll-box flex" @scroll="scroll" scroll-x="true" :scroll-with-animation="true"
  34. scroll-left="10px">
  35. <view class="scroll-item" v-for="(item, index) in info.slider_image" :key="index">
  36. <image class="scroll-image" :src="item" mode="heightFix" @click="openImg(info.slider_image, item)">
  37. </image>
  38. </view>
  39. </scroll-view>
  40. </view>
  41. <view class="" style="height: 100rpx;"></view>
  42. <view class="btn-box flex" v-if="info.phone">
  43. <view class="btn-left" @click="tocall()">拨打电话</view>
  44. <!-- #ifdef H5 -->
  45. <view class="btn-right" @click="toGaodeMap()">导航到店</view>
  46. <!-- #endif -->
  47. <!-- #ifdef MP -->
  48. <view class="btn-right" @click="dh()">导航到店</view>
  49. <!-- #endif -->
  50. <!-- #ifdef APP-PLUS -->
  51. <view class="btn-right" @click="gomapApp(info.latitude, info.longitude, info.name)">导航到店</view>
  52. <!-- #endif -->
  53. </view>
  54. <view class="btn-box dhdd flex" v-if="!info.phone">
  55. <!-- #ifdef H5 -->
  56. <view class="btn-right" @click="toGaodeMap()">导航到店</view>
  57. <!-- #endif -->
  58. <!-- #ifdef MP -->
  59. <view class="btn-right" @click="dh()">导航到店</view>
  60. <!-- #endif -->
  61. <!-- #ifdef APP-PLUS -->
  62. <view class="btn-right" @click="gomapApp(info.latitude, info.longitude, info.name)">导航到店</view>
  63. <!-- #endif -->
  64. </view>
  65. </view>
  66. </template>
  67. <script>
  68. import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
  69. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  70. import {
  71. getVip
  72. } from '@/api/index.js';
  73. // #ifdef H5
  74. import {
  75. weixindata,
  76. shareLoad
  77. } from '@/utils/wxAuthorized';
  78. // #endif
  79. import {
  80. saveUrl,
  81. interceptor
  82. } from '@/utils/loginUtils.js';
  83. import {
  84. mapState,
  85. mapMutations
  86. } from 'vuex';
  87. import {
  88. getStoreDetail
  89. } from '@/api/user.js';
  90. import uniPopup from '@/components/uni-popup/uni-popup.vue';
  91. export default {
  92. components: {
  93. uniLoadMore,
  94. jyfParser
  95. },
  96. data() {
  97. return {
  98. money: '',
  99. vipList: [], //商品列表
  100. page: 1,
  101. limit: 10,
  102. loadingType: 'more',
  103. id: '',
  104. info: {},
  105. art: '',
  106. address: '',
  107. };
  108. },
  109. computed: {
  110. ...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude']),
  111. ...mapMutations('user', ['setUserInfo', 'setOrderInfo'])
  112. },
  113. onLoad(option) {
  114. let obj = this;
  115. this.id = option.id;
  116. this.getStoreDetail();
  117. },
  118. methods: {
  119. navToDetailPage(item) {
  120. let id = item.id;
  121. uni.navigateTo({
  122. url: '/pages/product/product?id=' + id + '&isVip=' + 8 + '&store_id=' + item.store_id
  123. });
  124. },
  125. cancel() {
  126. this.money = '';
  127. this.$refs.popup.close();
  128. },
  129. // 获取门店详情
  130. getStoreDetail() {
  131. let obj = this;
  132. console.log('进入');
  133. getStoreDetail({}, obj.id).then(res => {
  134. obj.info = res.data.info;
  135. obj.info.jl = obj.getFlatternDistance(obj.latitude, obj.longitude, obj.info.latitude, obj.info
  136. .longitude);
  137. });
  138. },
  139. markertap(e) {
  140. let obj = this;
  141. // #ifdef H5
  142. weixindata().then(wxOjb => {
  143. console.log(wxOjb, '获取微信');
  144. wxOjb.openLocation({
  145. latitude: obj.info.latitude, // 纬度,浮点数,范围为90 ~ -90
  146. longitude: obj.info.longitude, // 经度,浮点数,范围为180 ~ -180。
  147. name: obj.info.name, // 位置名
  148. address: obj.info.detailed_address, // 地址详情说明
  149. scale: 28, // 地图缩放级别,整型值,范围从1~28。默认为最大
  150. infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
  151. });
  152. });
  153. // #endif
  154. },
  155. //根据经纬度计算距离
  156. getFlatternDistance(lat1, lng1, lat2, lng2) {
  157. console.log(lat1, lng1, lat2, lng2);
  158. let radLat1 = (lat1 * Math.PI) / 180.0;
  159. let radLat2 = (lat2 * Math.PI) / 180.0;
  160. let a = radLat1 - radLat2;
  161. let b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
  162. let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
  163. .pow(Math.sin(b / 2), 2)));
  164. s = s * 6378.137;
  165. s = Math.round(s * 10000) / 10000;
  166. s = s.toFixed(2) * 1;
  167. return s;
  168. },
  169. scroll(e) {
  170. console.log(e, '123456');
  171. },
  172. tocall() {
  173. let num = this.info.phone;
  174. console.log(num);
  175. uni.makePhoneCall({
  176. phoneNumber: num //仅为示例
  177. });
  178. },
  179. getaddress() {
  180. console.log('dizhi+++++++++++');
  181. let obj = this;
  182. // #ifndef H5
  183. uni.getLocation({
  184. type: 'gcj02',
  185. success: res => {
  186. console.log(res, 123456);
  187. obj.setLat(res.latitude);
  188. obj.setLon(res.longitude);
  189. obj.getStoreDetail();
  190. },
  191. fail: err => {
  192. console.log(err, 'shi+++++++++++++++');
  193. openMap().then(e => {
  194. this.getaddress();
  195. });
  196. }
  197. });
  198. // #endif
  199. // #ifdef H5
  200. uni.getLocation({
  201. type: 'wgs84',
  202. success: res => {
  203. console.log(res, 123456);
  204. let wz = obj.wgs84Togcj02(res.longitude, res.latitude);
  205. obj.setLat(wz[1]);
  206. obj.setLon(wz[0]);
  207. obj.getStoreDetail();
  208. },
  209. fail: err => {
  210. console.log(err, 'shi+++++++++++++++');
  211. openMap().then(e => {
  212. this.getaddress();
  213. });
  214. }
  215. });
  216. // weixindata().then(wxOjb => {
  217. // console.log(wxOjb, '获取微信');
  218. // wxOjb.getLocation({
  219. // type: 'gcj02',
  220. // success: res => {
  221. // console.log(res, 123456);
  222. // obj.setLat(res.latitude);
  223. // obj.setLon(res.longitude);
  224. // obj.getStoreDetail();
  225. // },
  226. // fail: err => {
  227. // console.log(err, 'shi+++++++++++++++');
  228. // openMap().then(e => {
  229. // obj.getaddress();
  230. // });
  231. // }
  232. // });
  233. // });
  234. // #endif
  235. },
  236. wgs84Togcj02(lng, lat) {
  237. if (this.out_of_china(lng, lat)) {
  238. return [lng, lat];
  239. }
  240. //定义一些常量
  241. //GCJ02 转换为 WGS84
  242. var that = this;
  243. const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
  244. const PI = 3.1415926535897932384626;
  245. const a = 6378245.0;
  246. const ee = 0.00669342162296594323;
  247. let dlat = that.transformlat(lng - 105.0, lat - 35.0);
  248. let dlng = that.transformlng(lng - 105.0, lat - 35.0);
  249. let radlat = (lat / 180.0) * PI;
  250. let magic = Math.sin(radlat);
  251. magic = 1 - ee * magic * magic;
  252. let sqrtmagic = Math.sqrt(magic);
  253. dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
  254. dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
  255. var mglat = lat + dlat;
  256. var mglng = lng + dlng;
  257. return [mglng, mglat];
  258. },
  259. out_of_china(lng, lat) {
  260. return lng < 72.004 || lng > 137.8347 || (lat < 0.8293 || lat > 55.8271 || false);
  261. },
  262. transformlat(lng, lat) {
  263. const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
  264. const PI = 3.1415926535897932384626;
  265. const a = 6378245.0;
  266. const ee = 0.00669342162296594323;
  267. let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(
  268. lng));
  269. ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
  270. ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0;
  271. ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0;
  272. return ret;
  273. },
  274. transformlng(lng, lat) {
  275. const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
  276. const PI = 3.1415926535897932384626;
  277. const a = 6378245.0;
  278. const ee = 0.00669342162296594323;
  279. let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
  280. ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
  281. ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0;
  282. ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0;
  283. return ret;
  284. },
  285. //
  286. openImg(list, item) {
  287. uni.previewImage({
  288. current: item,
  289. urls: list
  290. });
  291. },
  292. // 调用高德
  293. toGaodeMap() {
  294. let obj = this;
  295. window.location.href =
  296. `https://uri.amap.com/marker?position=${obj.info.longitude},${obj.info.latitude}&name=${obj.info.name}`;
  297. },
  298. // 导航
  299. dh() {
  300. let obj = this;
  301. wx.openLocation({
  302. latitude: obj.info.latitude * 1,
  303. longitude: obj.info.longitude * 1,
  304. name: obj.info.name,
  305. address: obj.info.detailed_address
  306. });
  307. },
  308. gomapApp(latitude, longitude, name) {
  309. let url = '';
  310. if (plus.os.name == 'Android') {
  311. //判断是安卓端
  312. plus.nativeUI.actionSheet({
  313. //选择菜单
  314. title: '选择地图应用',
  315. cancel: '取消',
  316. buttons: [{
  317. title: '腾讯地图'
  318. }, {
  319. title: '百度地图'
  320. }, {
  321. title: '高德地图'
  322. }]
  323. },
  324. function(e) {
  325. switch (e.index) {
  326. //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
  327. case 1:
  328. //注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
  329. url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
  330. break;
  331. case 2:
  332. url =
  333. `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
  334. break;
  335. case 3:
  336. url =
  337. `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
  338. break;
  339. default:
  340. break;
  341. }
  342. if (url != '') {
  343. url = encodeURI(url);
  344. //plus.runtime.openURL(url,function(e){})调起手机APP应用
  345. plus.runtime.openURL(url, function(e) {
  346. plus.nativeUI.alert('本机未安装指定的地图应用');
  347. });
  348. }
  349. }
  350. );
  351. } else {
  352. // iOS上获取本机是否安装了百度高德地图,需要在manifest里配置
  353. // 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
  354. //(如urlschemewhitelist:["iosamap","baidumap"])
  355. plus.nativeUI.actionSheet({
  356. title: '选择地图应用',
  357. cancel: '取消',
  358. buttons: [{
  359. title: '腾讯地图'
  360. }, {
  361. title: '百度地图'
  362. }, {
  363. title: '高德地图'
  364. }]
  365. },
  366. function(e) {
  367. switch (e.index) {
  368. case 1:
  369. url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
  370. break;
  371. case 2:
  372. url =
  373. `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
  374. break;
  375. case 3:
  376. url =
  377. `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
  378. break;
  379. default:
  380. break;
  381. }
  382. if (url != '') {
  383. url = encodeURI(url);
  384. plus.runtime.openURL(url, function(e) {
  385. plus.nativeUI.alert('本机未安装指定的地图应用');
  386. });
  387. }
  388. }
  389. );
  390. }
  391. }
  392. }
  393. };
  394. </script>
  395. <style lang="less">
  396. .center,
  397. page {
  398. background: #f8f8f8;
  399. height: 100%;
  400. }
  401. .dhdd {
  402. view {
  403. margin: 0 auto;
  404. }
  405. }
  406. .store-info {
  407. background: #ffffff;
  408. .store-top {
  409. padding: 40rpx 20rpx;
  410. justify-content: flex-start;
  411. .simage {
  412. width: 130rpx;
  413. height: 130rpx;
  414. background: #f44939;
  415. }
  416. .stop-main {
  417. height: 130rpx;
  418. padding: 6rpx 0;
  419. margin-left: 20rpx;
  420. display: flex;
  421. flex-direction: column;
  422. justify-content: space-between;
  423. align-items: flex-start;
  424. .stop-title {
  425. font-size: 36rpx;
  426. font-family: PingFang SC;
  427. font-weight: 500;
  428. color: #000000;
  429. }
  430. .stop-address {
  431. display: flex;
  432. justify-content: flex-end;
  433. align-items: center;
  434. .mrt-image {
  435. width: 20rpx;
  436. height: 28rpx;
  437. }
  438. .mrt-font {
  439. margin-left: 8rpx;
  440. font-size: 22rpx;
  441. font-family: PingFang SC;
  442. font-weight: 500;
  443. color: #666666;
  444. }
  445. }
  446. }
  447. }
  448. }
  449. .store-item {
  450. background: #ffffff;
  451. display: flex;
  452. justify-content: flex-start;
  453. align-items: center;
  454. padding: 30rpx 30rpx 30rpx 44rpx;
  455. .store-image1 {
  456. width: 36rpx;
  457. height: 36rpx;
  458. }
  459. .store-image2 {
  460. margin: 0 1rpx;
  461. width: 34rpx;
  462. height: 34rpx;
  463. }
  464. .store-image3 {
  465. margin: 0 7rpx;
  466. width: 22rpx;
  467. height: 28rpx;
  468. }
  469. .store-font {
  470. margin-left: 22rpx;
  471. font-size: 26rpx;
  472. font-family: PingFang SC;
  473. font-weight: 500;
  474. color: #2d2d2d;
  475. }
  476. }
  477. .store-main {
  478. margin-top: 16rpx;
  479. background: #ffffff;
  480. padding: 30rpx 42rpx 40rpx;
  481. .smain-title {
  482. font-size: 30rpx;
  483. font-family: PingFang SC;
  484. font-weight: 500;
  485. color: #464646;
  486. }
  487. }
  488. .scroll-box {
  489. white-space: nowrap;
  490. margin-top: 30rpx;
  491. height: 240rpx;
  492. .scroll-item:first-child {
  493. margin-left: 0;
  494. }
  495. .scroll-item {
  496. margin-left: 20rpx;
  497. display: inline-block;
  498. height: 240rpx;
  499. // width: 240rpx;
  500. }
  501. .scroll-image {
  502. height: 240rpx;
  503. // width: 240rpx;
  504. }
  505. }
  506. .btn-box {
  507. position: fixed;
  508. bottom: 0rpx;
  509. left: 0;
  510. right: 0;
  511. width: 750rpx;
  512. background: rgba(255, 255, 255, 0.6);
  513. box-shadow: 0rpx 0rpx 20rpx 0px rgba(50, 50, 52, 0.06);
  514. padding: 22rpx 68rpx;
  515. .btn-left {
  516. width: 280rpx;
  517. height: 80rpx;
  518. background: linear-gradient(180deg, #ffa30b, #ffd158);
  519. box-shadow: 0px 3rpx 13rpx 3rpx rgba(255, 164, 13, 0.48);
  520. border-radius: 40rpx;
  521. text-align: center;
  522. line-height: 80rpx;
  523. font-size: 32rpx;
  524. font-family: PingFang SC;
  525. font-weight: 500;
  526. color: #ffffff;
  527. }
  528. .btn-right {
  529. width: 280rpx;
  530. height: 80rpx;
  531. background: linear-gradient(180deg, #ff6223, #ffab60);
  532. box-shadow: 0px 3rpx 13rpx 3rpx rgba(255, 164, 13, 0.48);
  533. border-radius: 40rpx;
  534. text-align: center;
  535. line-height: 80rpx;
  536. font-size: 32rpx;
  537. font-family: PingFang SC;
  538. font-weight: 500;
  539. color: #ffffff;
  540. }
  541. }
  542. .popup_row {
  543. width: 100%;
  544. height: 500rpx;
  545. background-color: #ffffff;
  546. border-radius: 20rpx;
  547. display: flex;
  548. justify-content: center;
  549. align-items: center;
  550. .rows {
  551. width: 100%;
  552. padding: 0 24rpx;
  553. .rows-item {
  554. height: 80rpx;
  555. line-height: 80rpx;
  556. text-align: center;
  557. width: 100%;
  558. font-size: 32rpx;
  559. color: #303133;
  560. // border-bottom: 1rpx solid #f0f0f0;
  561. }
  562. // .row-1 {
  563. // margin: auto;
  564. // .first_aid {
  565. // width: 300rpx;
  566. // height: 300rpx;
  567. // }
  568. // }
  569. // .row-2 {
  570. // font-size: 38rpx;
  571. // margin-top: 20rpx;
  572. // }
  573. }
  574. }
  575. .shop-dhq {
  576. width: 702rpx;
  577. height: 171rpx;
  578. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.15);
  579. margin: auto;
  580. border-radius: 20rpx;
  581. background-color: #fff;
  582. padding: 0 48rpx 0 26rpx;
  583. margin-bottom: 20rpx;
  584. .dhq-left {
  585. .dhq-name {
  586. overflow: hidden;
  587. width: 28%;
  588. font-size: 28rpx;
  589. font-weight: bold;
  590. color: #333333;
  591. }
  592. .dhq-price {
  593. padding-top: 20rpx;
  594. .j-price {
  595. font-size: 38rpx;
  596. font-weight: bold;
  597. color: #ff4c4c;
  598. &::before {
  599. content: '¥';
  600. font-size: 24rpx;
  601. color: #ff4c4c;
  602. }
  603. }
  604. .j-zk {
  605. margin: 10rpx;
  606. display: inline-block;
  607. margin-left: 10rpx;
  608. line-height: 32rpx;
  609. height: 32rpx;
  610. border: 1px solid #ff4c4c;
  611. border-radius: 5rpx;
  612. font-size: 22rpx;
  613. font-weight: 500;
  614. color: #ff4c4c;
  615. padding: 0 8rpx;
  616. }
  617. }
  618. }
  619. .dhq-right {
  620. .right-btn {
  621. width: 105rpx;
  622. line-height: 56rpx;
  623. background: linear-gradient(143.2747deg, #ff6a00, #ee0979);
  624. border: 1rpx solid #ff4c4c;
  625. border-radius: 27rpx;
  626. text-align: center;
  627. color: #fff;
  628. font-size: 28rpx;
  629. font-weight: bold;
  630. }
  631. }
  632. }
  633. .jx-box-content {
  634. display: flex;
  635. .content-left {
  636. margin: 20rpx 15rpx;
  637. width: 236rpx;
  638. height: 236rpx;
  639. background: #e2e2e2;
  640. border-radius: 10rpx;
  641. image {
  642. width: 100%;
  643. height: 100%;
  644. }
  645. }
  646. .content-right {
  647. display: flex;
  648. flex-direction: column;
  649. justify-content: space-around;
  650. .shop-name {
  651. width: 382rpx;
  652. font-size: 32rpx;
  653. font-weight: bold;
  654. color: #333333;
  655. overflow: hidden;
  656. text-overflow: ellipsis;
  657. display: -webkit-box;
  658. -webkit-box-orient: vertical;
  659. -webkit-line-clamp: 2;
  660. }
  661. .shop-content {
  662. width: 455rpx;
  663. display: flex;
  664. justify-content: space-between;
  665. .shop-content-left {
  666. display: flex;
  667. flex-direction: column;
  668. .price-box {
  669. display: flex;
  670. align-items: center;
  671. .yuan-price {
  672. font-size: 26rpx;
  673. font-weight: 500;
  674. text-decoration: line-through;
  675. color: #999999;
  676. }
  677. image {
  678. margin: 0 10rpx;
  679. width: 16rpx;
  680. height: 18rpx;
  681. }
  682. .j-price {
  683. font-size: 24rpx;
  684. font-weight: bold;
  685. color: #b59467;
  686. }
  687. }
  688. .price-x {
  689. font-size: 36rpx;
  690. font-weight: bold;
  691. color: #ff4c4c;
  692. }
  693. }
  694. .shop-content-right {
  695. margin-top: 20rpx;
  696. align-items: center;
  697. text-align: center;
  698. width: 137rpx;
  699. height: 52rpx;
  700. font-size: 26rpx;
  701. font-weight: 500;
  702. color: #fff;
  703. background: #f75022;
  704. border-radius: 26rpx;
  705. line-height: 52rpx;
  706. }
  707. }
  708. }
  709. }
  710. .main {
  711. padding: 10rpx;
  712. display: flex;
  713. flex-direction: column;
  714. }
  715. /deep/ .main {
  716. .rich-img {
  717. width: 100% !important;
  718. height: auto;
  719. }
  720. }
  721. </style>