fangliaoxiaochengxv/subPages/accompanyingCamp/accompanyingCamp.vue

<template>
  <view>
    <view class="shopping-wrapper">
      <view class="wz-cover " :style="{backgroundImage:`url(${item.cover})`, backgroundSize: 'cover'}" v-for="(item, index) in newsList" :key="index" @click="toDetail(item)">
            <view class="title mb5 display-flex">
                  {{item.name}} <view class="ml8"><u-icon name="arrow-right"  color="#333333" size="14"></u-icon></view>
            </view>
            <view class="remark">
                  {{item.remark}}
            </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getNewsList} from "@/common/api/news";
import {getData} from "@/common/api";

export default {
  data() {
    return {
      cid: 5,
      newsList:[],
      page: 1,
      pageSize: 9999,
    };
  }
  ,onShow() {
      this.getData()
  },
  methods: {
    getData(){
      getNewsList(
      {
        "cid": this.cid,
        "page": this.page,
        "pageSize": this.pageSize
      }).then(({ data })=>{
       if ( data.list){
         this.newsList=data.list
       }
      })
    },
    toDetail(item){
      uni.navigateTo({
        url: "/subPages/accompanyingCamp/accompanyingCampDetail?id=" + item.id,
      });
    }
  }
}
</script>

<style lang="scss">
.shopping-wrapper {
  width: 690rpx;
  margin: 10rpx auto 0rpx;
  padding: 0rpx 30rpx 178rpx;
  .wz-cover{
    width: calc(100% - 340rpx);
    height: 144rpx;
    margin-top: 20rpx;
    padding-left:330rpx;
    padding-right:10rpx;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 15rpx;
    display: flex; /* 设置为 Flex 容器 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 垂直居中子元素 */
    text-align: center; /* 文字居中 */
    .title {
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .remark{
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      color: #666666;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的文本 */
      text-overflow: ellipsis;
    }
  }
}
</style>