index.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704
  1. <template>
  2. <view style="overflow-y: scroll;">
  3. <!-- 状态栏高度 -->
  4. <view :style="{ height: `${statusBarHeight}px` }"></view>
  5. <!-- 导航栏 -->
  6. <view class="navigationbar" :style="{ height: `${navigationBarHeight}px` }">
  7. <view class="bar-left flex-y-center">
  8. <image src="/static/img/ic-position.png" @tap="chooseLocation()">
  9. </image>
  10. <text class="bar-position">{{userAddress}}</text>
  11. </view>
  12. <view class="bar-center">校园外卖</view>
  13. <view style="flex: 1;">
  14. <image @click="goSearch" src="/static/img/ic-search.png"></image>
  15. </view>
  16. </view>
  17. <!-- 主体内容 -->
  18. <view class="content" :style="{ marginTop: `${navigationBarHeight + 5 }px` }">
  19. <!-- banner轮播图 -->
  20. <view style="margin-top: 10rpx;">
  21. <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
  22. <block v-for="(item,index) in bannerList" :key='item.id'>
  23. <swiper-item catchtouchmove='catchTouchMove'>
  24. <view class="swiper-item">
  25. <image class="banner-img" :src="item.imageUrl" mode="widthFix" />
  26. </view>
  27. </swiper-item>
  28. </block>
  29. </swiper>
  30. </view>
  31. <!-- 新闻 -->
  32. <view class="container">
  33. <!-- 左侧固定图片 -->
  34. <image class="left-image" src="/static/img/ic-message.png"></image>
  35. <!-- 右侧文字轮播区域 -->
  36. <view class="right-text-container">
  37. <swiper :indicator-dots="false" :autoplay="autoplay" interval="2500" :duration="500" vertical="true" circular="true">
  38. <block v-for="(item,index) in messageList" :key='index'>
  39. <swiper-item catchtouchmove='catchTouchMove'>
  40. <view class='text acea-row row-between-wrapper'>
  41. <view class='newsTitle'>
  42. {{item.title}}
  43. </view>
  44. <!-- <view class='newsTitle' v-if="messageList.length = 0">
  45. 暂无
  46. </view> -->
  47. </view>
  48. </swiper-item>
  49. </block>
  50. </swiper>
  51. <!-- <view class="text-list" :style="{ transform: `translateY(${offset}px)` }">
  52. <view class="text-item" v-for="(item, index) in messageList" :key="index">
  53. {{ item.title }}
  54. </view>
  55. <view class="text-item" v-if="messageList.length > 0">
  56. {{ messageList[0].title }}
  57. </view>
  58. </view> -->
  59. </view>
  60. </view>
  61. <!-- 九宫格 -->
  62. <view class="content-tab">
  63. <view class="tab-list">
  64. <view class="tab-item flex-col flex-between-center" v-for="(item, index) in cateList" :key="index" @tap="onCateListClick(item)">
  65. <image class="tab-image" :style="{width: !item.isHighLight ? '80rpx' : ''}" :src="item.imageUrl" mode="widthFix"></image>
  66. <text :class="item.isHighLight || item.color ? 'tab-text' : 'tab-text2' " :style="{color: item.color || ''}">{{item.name}}</text>
  67. </view>
  68. </view>
  69. </view>
  70. <!-- 活动精选 -->
  71. <view class="content-goods" v-if="proList.length">
  72. <view>
  73. <image src="/static/img/img-hdjx.png" style="width: 298rpx;height: 44rpx;"></image>
  74. <text class="goods-more" @tap="goGenDuo">更多 》</text>
  75. </view>
  76. <view style="display: flex;">
  77. <view class="goods-list" v-for="item in proList" :key="item.id">
  78. <view style="display: flex;" @click="goGoodList(item)">
  79. <view style="margin-right: 20rpx;">
  80. <image :src="item.image" style="width: 134rpx;height: 134rpx;border-radius: 12rpx;">
  81. </image>
  82. </view>
  83. <view>
  84. <view class="goods-title">{{item.name}}</view>
  85. <view class="goods-desc">{{item.intro}}</view>
  86. <view class="flex-y-center" style="margin-top: 10rpx;">
  87. <image src="/static/img/ic-ykj.png" style="height: 38rpx;width: 86rpx;"></image>
  88. <text class="goods-price">¥</text>
  89. <text class="goods-price" style="font-size: 30rpx;">{{item.price}}</text>
  90. </view>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </view>
  96. <!-- 销量排行 -->
  97. <view class="tab-list" style="margin-top: 10rpx;">
  98. <view :class=" item.checked ? 'tab-item2' : 'tab-item2-false' " v-for="item in labelList" :key="item.id" @click="item2Click(item)">{{item.label}}</view>
  99. </view>
  100. <view class="content-goods2" v-for="item in merchantList" :key="item.id" @click="merchantTab(item)">
  101. <view>
  102. <image :src="item.avatar" style="width: 230rpx;height: 230rpx;"></image>
  103. </view>
  104. <view style="margin-left: 20rpx;flex: 1;">
  105. <view class="">
  106. <text class="goods-title">{{item.name}}</text>
  107. </view>
  108. <view style="margin-top: 10rpx;">
  109. <text class="goods-score">{{item.score}}</text>
  110. <text class="goods-info" style="margin-left: 10rpx;">月销 {{item.salesVolume}}</text>
  111. <text class="goods-info" style="margin-left: 25rpx;">人均 ¥ {{item.perCapita==null?0:item.perCapita}}</text>
  112. </view>
  113. <view style="margin-top: 10rpx;display: flex;align-items: center;">
  114. <text class="goods-info">起送 ¥ {{item.deliveryFee==null?0:item.deliveryFee}}</text>
  115. <text v-if="item.isFreeDeliverFee" class="goods-info" style="color: #E5AD21;margin-left: 18rpx;">免配送费</text>
  116. <view v-if="item.isFreeDeliverFee && item.freeDeliverFee>0" style="color: #999999;font-size: 21rpx;margin-left: 10rpx;text-decoration: line-through;">¥
  117. {{item.freeDeliverFee}}</view>
  118. <text v-if="!item.isFreeDeliverFee" class="goods-info" style="color: #999999;margin-left: 40rpx;">配送费¥{{item.distCosts}}</text>
  119. <text class="goods-info" style="margin-left: 38rpx;">{{item.deliverTime}}分钟</text>
  120. <text class="goods-info" style="margin-left: 10rpx;">{{item.distance}}</text>
  121. </view>
  122. <view style="margin-top: 22rpx;"><text class="goods-sales">已售卖{{getFormattedSales(item.salesAllNum)}}单</text></view>
  123. <view style="margin-top: 14rpx;">
  124. <swiper :indicator-dots="false" :autoplay="true" :circular="true" :display-multiple-items="3" style="height: 43rpx;">
  125. <swiper-item v-for="(item2,index2) in item.discountLabel" :key="index2">
  126. <text class="goods-labels">{{item2}}</text>
  127. </swiper-item>
  128. </swiper>
  129. <!-- <text class="goods-labels" v-for="(item2,index2) in item.discountLabel" :key="index2">{{item2}}</text> -->
  130. </view>
  131. </view>
  132. </view>
  133. <view class='loadingicon flex-center' :hidden='!loading'>
  134. <text class='loading iconfont icon-jiazai' style="width: auto;"></text>加载更多
  135. </view>
  136. </view>
  137. </view>
  138. </template>
  139. <script>
  140. import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js';
  141. import {
  142. getMerchantList,
  143. getHomeInfo
  144. } from '@/api/home.js';
  145. import {
  146. toLogin
  147. } from '@/libs/login.js';
  148. import {
  149. mapGetters
  150. } from "vuex";
  151. import {
  152. BACK_URL
  153. } from '@/config/cache';
  154. import Cache from '@/utils/cache';
  155. import tags from '../../mixins/tags';
  156. var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  157. let app = getApp();
  158. export default {
  159. mixins:[tags],
  160. computed: mapGetters(['isLogin']),
  161. data() {
  162. return {
  163. statusBarHeight: app.globalData.statusBarHeight,
  164. navigationBarHeight: 0,
  165. userAddress: "定位",
  166. indicatorDots: true,
  167. autoplay: true,
  168. interval: 2000, //切换的间隔时间
  169. duration: 500, //滑动动画时长
  170. bannerList: [],
  171. messageList: [],
  172. cateList: [],
  173. cateId: 0,
  174. proList: [],
  175. // labelList: [{
  176. // id: 1,
  177. // label: "销量排行",
  178. // checked: true
  179. // }, {
  180. // id: 2,
  181. // label: "满减大促",
  182. // checked: false
  183. // }, {
  184. // id: 3,
  185. // label: "首单立减",
  186. // checked: false
  187. // }, {
  188. // id: 4,
  189. // label: "减配送费",
  190. // checked: false
  191. // }],
  192. merchantList: [],
  193. loading: false,
  194. currentIndex: 0,
  195. offset: 0,
  196. }
  197. },
  198. //下拉刷新
  199. onPullDownRefresh() {
  200. },
  201. onLoad(options) {
  202. let that = this;
  203. //首页数据加载
  204. // this.getIndexConfig();
  205. // #ifdef MP-WEIXIN
  206. // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
  207. const custom = wx.getMenuButtonBoundingClientRect()
  208. // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
  209. that.navigationBarHeight = custom.height + (custom.top - that.statusBarHeight) * 2
  210. // console.log("导航栏高度:"+this.globalData.navigationBarHeight)
  211. // #endif
  212. that.initLocation();
  213. },
  214. methods: {
  215. getFormattedSales(value) {
  216. // 转换成字符串,然后截取前三位,并添加“+”
  217. return value.length>3?`${String(value).slice(0, 3)}+`:value;
  218. },
  219. initLocation() {
  220. let that = this;
  221. this.$util.$L.getLocation().then(res => {
  222. const qqmapsdk = new QQMapWX({
  223. key: '7FJBZ-ACWCN-EFWFQ-SBXR5-QXC7K-LPF2U'
  224. //key: '7FJBZ-ACWCN-EFWFQ-SBXR5-QXC7K-LPF2U'
  225. });
  226. qqmapsdk.reverseGeocoder({
  227. location: {
  228. latitude: uni.getStorageSync('user_latitude'),
  229. longitude: uni.getStorageSync('user_longitude'),
  230. },
  231. success: (res2) => {
  232. const address = res2.result.address; // 完整地址(如北京市海淀区中关村)
  233. const province = res2.result.ad_info.province; // 省份
  234. const city = res2.result.ad_info.city; // 城市
  235. uni.setStorageSync('cityName', city);
  236. const recommend = res2.result.address_reference.landmark_l2.title;; // 推荐使用的地址描述,描述精确性较高
  237. console.log('地址信息1:', res2);
  238. that.userAddress = recommend;
  239. that.getHomeData();
  240. },
  241. fail: (err) => {
  242. console.error('逆地理编码失败:', err);
  243. }
  244. });
  245. })
  246. },
  247. // getTag(){
  248. // return this.labelList.filter((ite => ite.checked)).map(ite => ite.id).join(',')
  249. // },
  250. getHomeData() {
  251. getHomeInfo({
  252. latitude: uni.getStorageSync('user_latitude'),
  253. longitude: uni.getStorageSync('user_longitude'),
  254. }).then(res => {
  255. this.bannerList = res.data.banner;
  256. this.proList = res.data.proList;
  257. console.log(res.data)
  258. this.messageList = res.data.headline;
  259. this.cateList = res.data.navigatList;
  260. this.cateId = res.data.cateId
  261. this.cateList.push({
  262. id: 999999,
  263. name: '今日吃啥',
  264. imageUrl: '/static/img/ic-random.png',
  265. color: '#FF9805',
  266. linkUrl: '/pages/what_to_eat_today/index/index?id=1'
  267. });
  268. this.loading = true;
  269. getMerchantList({
  270. latitude: uni.getStorageSync('user_latitude'),
  271. longitude: uni.getStorageSync('user_longitude'),
  272. cateId: this.cateId,
  273. queryLabels: this.getTag()
  274. }).then(res => {
  275. this.merchantList = res.data.list;
  276. console.log('商品信息:', this.merchantList);
  277. this.loading = false;
  278. });
  279. // this.messageList = [{"id":2,"title":"绿草地活动大促,消费满三十减十五"},{"id":3,"title":"绿草地活动大促,消费满三十减十五33333"}];
  280. console.log("this.messageList--", this.messageList)
  281. // this.startScroll();
  282. })
  283. },
  284. item2Click(item) {
  285. item.checked = !item.checked;
  286. this.merchantList = [];
  287. this.loading = true;
  288. getMerchantList({
  289. latitude: uni.getStorageSync('user_latitude'),
  290. longitude: uni.getStorageSync('user_longitude'),
  291. cateId: this.cateId,
  292. queryLabels: this.getTag()
  293. }).then(res => {
  294. this.merchantList = res.data.list;
  295. console.log('商品信息:', this.merchantList);
  296. this.loading = false;
  297. });
  298. },
  299. startScroll() {
  300. setInterval(() => {
  301. this.currentIndex = (this.currentIndex + 1) % this.messageList.length;
  302. this.offset = -this.currentIndex * 20; // 20px 是单行高度
  303. }, 2000); // 2秒切换一次
  304. },
  305. goSearch() {
  306. this.$util.navigateTo('/pages/goods/goods_search/index');
  307. },
  308. goGenDuo() {
  309. const isActivity=true;
  310. this.$util.navigateTo(`/pages/goods/goods_list/index?isActivity=${isActivity}&cateId=${this.cateId}`);
  311. },
  312. //配送时间转换
  313. convertMinutes(minutes) {
  314. const mins = Number(minutes);
  315. if (isNaN(mins)) return '无效输入';
  316. if (mins > 60) {
  317. const hours = Math.floor(mins / 60);
  318. const remaining = mins % 60;
  319. let result = [];
  320. if (hours > 0) result.push(`${hours}小时`);
  321. if (remaining > 0) result.push(`${remaining}分钟`);
  322. return result.join('') || '0分钟';
  323. } else {
  324. return `${mins}分钟`;
  325. }
  326. },
  327. merchantTab(item) {
  328. let cid = item.cid
  329. // 修改跳转
  330. uni.navigateTo({
  331. url: `/pages/merchant/home/index?merId=${item.id}`
  332. // url: `/pages/goods_cate/index?id=${item.id}`
  333. })
  334. },
  335. onCateListClick(item) {
  336. if (!this.isLogin) {
  337. this.openAuto();
  338. } else {
  339. if (item.linkUrl) {
  340. uni.navigateTo({
  341. url: item.linkUrl + `&navTitle=${item.name}`
  342. })
  343. }
  344. }
  345. },
  346. goGoodList(item) {
  347. uni.navigateTo({
  348. url: `/pages/goods/goods_details/index?id=${item.productId}&mt=0&iSshop=1`
  349. })
  350. },
  351. //选择定位
  352. chooseLocation: function() {
  353. this.$util.$L.getLocation().then(res => {
  354. uni.chooseLocation({
  355. latitude: uni.getStorageSync('user_latitude'),
  356. longitude: uni.getStorageSync('user_longitude'),
  357. success: (res) => {
  358. this.userAddress = res.name;
  359. this.loading = true;
  360. getMerchantList({
  361. latitude: res.latitude,
  362. longitude: res.longitude,
  363. cateId: this.cateId,
  364. queryLabels: this.getTag()
  365. }).then(data => {
  366. this.merchantList = data.data.list;
  367. console.log('商品信息:', this.merchantList);
  368. this.loading = false;
  369. });
  370. // this.$set(this.userAddress, 'detail', res.name);
  371. }
  372. })
  373. })
  374. },
  375. // 打开授权
  376. openAuto() {
  377. Cache.set(BACK_URL, '')
  378. toLogin();
  379. },
  380. },
  381. }
  382. </script>
  383. <style>
  384. page {
  385. height: auto;
  386. display: flex;
  387. flex-direction: column;
  388. height: 100%;
  389. /* #ifdef H5 */
  390. background-color: #fff;
  391. /* #endif */
  392. }
  393. </style>
  394. <style lang="scss" scoped>
  395. .navigationbar {
  396. display: flex;
  397. background-color: #FF6702;
  398. color: #fff;
  399. align-items: center;
  400. position: fixed;
  401. z-index: 100;
  402. width: 100%;
  403. }
  404. .navigationbar image {
  405. width: 35rpx;
  406. height: 35rpx;
  407. vertical-align: middle;
  408. }
  409. .bar-left {
  410. flex: 1;
  411. margin-left: 40rpx;
  412. }
  413. .bar-position {
  414. margin-left: 16rpx;
  415. font-size: 22rpx;
  416. overflow: hidden;
  417. /*超出部分隐藏*/
  418. white-space: nowrap;
  419. /*禁止换行*/
  420. text-overflow: ellipsis;
  421. /*省略号*/
  422. }
  423. .bar-center {
  424. flex: 1;
  425. font-size: 36rpx;
  426. }
  427. .swiper-item {
  428. flex-direction: column;
  429. justify-content: center;
  430. align-items: center;
  431. background-color: #999;
  432. color: #fff;
  433. text-align: center;
  434. width: 712rpx;
  435. height: 230rpx;
  436. border-radius: 10rpx;
  437. margin: 0 auto;
  438. }
  439. .banner-img {
  440. width: 712rpx;
  441. height: 230rpx;
  442. border-radius: 10rpx;
  443. }
  444. .content {
  445. margin: 0 20rpx;
  446. }
  447. .content-message {
  448. background-color: #fff;
  449. margin-top: 10rpx;
  450. padding: 10rpx;
  451. }
  452. .content-message image {
  453. width: 38rpx;
  454. height: 38rpx;
  455. vertical-align: middle;
  456. }
  457. .content-message text {
  458. font-size: 23rpx;
  459. color: #646464;
  460. margin-left: 16rpx;
  461. }
  462. .content-tab {
  463. background: linear-gradient(225deg, #ECF3FE 0%, #FEFEFE 100%);
  464. border-radius: 23rpx;
  465. padding: 20rpx;
  466. }
  467. .tab-list {
  468. display: flex;
  469. /* 启用弹性布局 */
  470. flex-direction: row;
  471. /* 横向排列 */
  472. justify-content: space-between;
  473. /* 均匀分布子项 */
  474. flex-wrap: wrap;
  475. /* 允许换行(适用于屏幕宽度不足时) */
  476. }
  477. .tab-item {
  478. width: 18%;
  479. /* 5个元素平分宽度,留1%作为间隙 */
  480. margin-bottom: 20rpx;
  481. /* 底部间距 */
  482. text-align: center;
  483. /* 内容居中 */
  484. color: #141414;
  485. font-size: 24rpx;
  486. }
  487. .tab-image {
  488. width: 100%;
  489. /* 宽度占满父容器 */
  490. height: 80rpx;
  491. /* 固定图片高度 */
  492. border-radius: 10rpx;
  493. /* 圆角效果 */
  494. background-color: #f5f5f5;
  495. /* 占位背景色 */
  496. }
  497. .tab-text {
  498. display: block;
  499. font-size: 27rpx;
  500. font-weight: 600;
  501. color: #141414;
  502. margin-top: 10rpx;
  503. }
  504. .tab-text2 {
  505. display: block;
  506. font-size: 23rpx;
  507. font-weight: 400;
  508. color: #141414;
  509. margin-top: 10rpx;
  510. }
  511. .content-goods {
  512. background: #FFFFFF;
  513. border-radius: 23rpx;
  514. padding: 20rpx;
  515. margin-top: 10rpx;
  516. }
  517. .tab-item2 {
  518. width: 23%;
  519. /* 5个元素平分宽度,留2%作为间隙 */
  520. text-align: center;
  521. background-color: #FFC127;
  522. border-radius: 8rpx;
  523. font-size: 23rpx;
  524. padding: 6rpx;
  525. font-weight: 400;
  526. }
  527. .tab-item2-false {
  528. width: 23%;
  529. /* 5个元素平分宽度,留2%作为间隙 */
  530. text-align: center;
  531. background-color: #fff;
  532. border-radius: 8rpx;
  533. font-size: 23rpx;
  534. padding: 6rpx;
  535. font-weight: 400;
  536. }
  537. .content-goods2 {
  538. background: #FFFFFF;
  539. border-radius: 23rpx;
  540. margin-top: 10rpx;
  541. padding: 20rpx;
  542. display: flex;
  543. }
  544. .goods-more {
  545. font-size: 21rpx;
  546. color: #999999;
  547. float: right;
  548. line-height: 44rpx;
  549. }
  550. .goods-list {
  551. flex: 1;
  552. margin-right: 18rpx;
  553. }
  554. .goods-title {
  555. color: #141414;
  556. font-size: 26rpx;
  557. font-weight: 600;
  558. }
  559. .goods-desc {
  560. color: #646464;
  561. font-size: 21rpx;
  562. margin-top: 10rpx;
  563. }
  564. .goods-price {
  565. color: #FF9805;
  566. font-size: 34rpx;
  567. font-weight: 600;
  568. }
  569. .goods-score {
  570. color: #FD6716;
  571. font-size: 26rpx;
  572. }
  573. .goods-info {
  574. color: #999999;
  575. font-size: 21rpx;
  576. }
  577. .goods-info3 {
  578. color: #999999;
  579. font-size: 21rpx;
  580. margin-left: 10rpx;
  581. text-decoration: line-through;
  582. }
  583. .goods-sales {
  584. background-color: #FEEFE5;
  585. color: #FF6702;
  586. border-radius: 8rpx;
  587. font-size: 21rpx;
  588. padding: 4rpx 20rpx;
  589. }
  590. .goods-labels {
  591. background-color: #FFF6F6;
  592. color: #FF4B4B;
  593. border: 2rpx solid #FF4B4B;
  594. border-radius: 8rpx;
  595. font-size: 21rpx;
  596. padding: 4rpx 16rpx;
  597. // margin-right: 20rpx;
  598. // margin-bottom: 20rpx;
  599. margin: 0rpx 20rpx 0rpx 10rpx;
  600. }
  601. .container {
  602. display: flex;
  603. align-items: center;
  604. padding: 12rpx;
  605. background: #ffffff;
  606. margin: 10rpx 0;
  607. }
  608. .left-image {
  609. width: 38rpx;
  610. height: 38rpx;
  611. margin-left: 20rpx;
  612. margin-right: 16rpx;
  613. }
  614. .right-text-container {
  615. flex: 1;
  616. height: 20px;
  617. /* 单行文字高度 */
  618. overflow: hidden;
  619. position: relative;
  620. }
  621. .text-list {
  622. position: absolute;
  623. width: 100%;
  624. transition: transform 0.5s ease;
  625. /* 动画过渡 */
  626. }
  627. .text-item {
  628. height: 40rpx;
  629. line-height: 40rpx;
  630. font-size: 23rpx;
  631. color: #646464;
  632. white-space: nowrap;
  633. overflow: hidden;
  634. text-overflow: ellipsis;
  635. }
  636. .newsTitle {
  637. font-size: 23rpx;
  638. color: #646464;
  639. margin-top: 2rpx;
  640. }
  641. </style>