daimp-front/sub-operation-service/src/views/ecommerce/components/goodsItem.vue

<template>
  <div class="c-goods-item-warp" @click="toDetail">
    <div class="goods-img">
      <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="cover" />
    </div>
    <div class="goods-name txt-ellipsis clamp2">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
    <div class="goods-do">
      <div class="price txt-ellipsis clamp">25.00</div>
      <div class="do">
        <div class="iconfont icon-cart"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const toDetail = () => {
  let id = '01';
  router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
};
</script>
<style lang="scss" scoped>
.c-goods-item-warp {
  width: 100%;
  padding: 8px;
  cursor: pointer;
  .goods-img {
    width: 100%;
    height: 168px;
    border-radius: 16px;
    overflow: hidden;
    ::v-deep() {
      .el-image {
        width: 100%;
        height: 168px;
      }
    }
  }
  .goods-name {
    margin-top: 8px;
    font-size: 16px;
    color: $color-666;
  }
  .goods-do {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    .price {
      width: calc(100% - 32px);
      text-align: left;
      font-size: 22px;
      padding-right: 8px;
      color: $color-main;
      font-weight: 700;
    }
    .price::before {
      content: ' ￥';
      font-size: 16px !important;
      font-weight: normal !important;
    }
    .do {
      display: inline-block;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      text-align: center;
      background: $color-main;
      position: relative;
      cursor: pointer;
      .iconfont {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: $color-fff;
        font-size: 20px;
      }
    }
  }
}
</style>