lcoco/pages/text/index.vue

<template>
	<view>
		<user-content></user-content>
	</view>
</template>

<script>
	import Black from '@/components/en-utils/en-blank/en-blank'
	import pagingList from '@/components/en-list/en-list'
  import enPrice from '@/components/en-utils/en-price/en-price'
  import {likeGoods} from "@/api/goods";
  import UserContent from "@/pages/index/model/user-content";

	export default {
		components:{
      UserContent,
			Black,
      pagingList,
      enPrice,
		},
    methods:{
      getGoodsList(page){
          likeGoods({'page':page}).then((res)=>{
            if(res.code===1){
              this.$refs.likeGoodsList.setList(res.data.list,res.data.total)
            }
          })
      }
    }
	}
</script>

<style scoped lang="scss">
    @font-face {
      font-family: 'iconfont';
      src:  url('/components/static/icon/iconfont.ttf') format('truetype');
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .goods-list{
      background-color: #F5F5F5;
      margin: 0 24rpx;
      .goods-item{
        width: 100%;
        height: 364rpx;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        margin: 20rpx 0;
        display: flex;
        .goods-item-left{
          padding: 24rpx;
          .goods-item-img{
            width:316rpx;
            height:316rpx;
            border-radius: 16rpx;
          }
        }
        .goods-item-right{
          width:100%;
          height:300rpx;
          padding:32rpx 30rpx 32rpx 0;
          position:relative;
          //display: flex;
          //align-content: space-between;
          .goods-item-name{
            color: #333333;
            font-size: 30rpx;
            font-weight: 600;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .goods-item-price{
            position:absolute;
            bottom: 32rpx;
            .item-price{

            }
            .item-market{
                text{
                  color: #999999;
                  font-size: 24rpx;
                  line-height: 34rpx;
                  padding: 0 20rpx 0 0;
                }
              .iconfont{
                padding: 0;
              }
            }
          }
          .goods-item-platform{
            height: 32rpx;
            margin-bottom: 10rpx;
            .goods-item-tp{
              padding: 4rpx 8rpx;
              color: #975BFE;
              width: 90rpx;
              height: 30rpx;
              font-size: 24rpx;
              line-height: 28rpx;
              border: 2rpx solid #985DFF;
              border-radius: 4rpx;
            }
            .goods-item-jd{
              padding: 4rpx 8rpx;
              border-radius: 6rpx;
              color: #FFFFFF;
              font-size: 24rpx;
              line-height: 28rpx;
              background: linear-gradient(90deg, #FD3229 0%, #FC7A28 100%);
            }
          }
          .goods-item-zh{

          }
        }
      }
    }
</style>