<template>
|
<div class="commodity_container">
|
<!-- loading -->
|
<Skelecton v-if="loading" :style="styles" />
|
<!-- -->
|
<div v-else class="">
|
<el-image style="width: 100%; height: 150px" :src="data.img" fit="cover" />
|
<div class="commodity_info">
|
<div class="commodity_tit text-ellipsis-2">{{ data.title }}</div>
|
<div class="guige">规格：{{ data.guige }}</div>
|
<div class="commodity_desc">
|
<div class="commodity_desc_l">
|
<span class="fuhao">{{ data.fuhao }}</span>
|
<span class="many">{{ data.many }}</span>
|
</div>
|
<div class="baozhuang">包装: {{ data.baozhuang }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { defineProps, ref } from "vue";
|
// @ts-ignore
|
import Skelecton from "../Skelecton/index.vue";
|
|
const props = defineProps<{
|
data: IDrugClassItem;
|
loading: boolean;
|
}>();
|
|
const styles = ref<ISkelectonStyle>({
|
width: "100%",
|
height: "231px",
|
// position: "absolute",
|
// left: 0,
|
// top: 0,
|
// "z-index": 98,
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.commodity_container {
|
position: relative;
|
.commodity_info {
|
padding: 8px 11px 15px 10px;
|
.commodity_tit {
|
margin-bottom: 6px;
|
font-size: 14px;
|
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
|
font-weight: 400;
|
color: #333333;
|
line-height: 20px;
|
}
|
.guige {
|
margin-bottom: 8px;
|
font-size: 13px;
|
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
|
font-weight: 400;
|
color: #868788;
|
line-height: 18px;
|
}
|
.commodity_desc {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.commodity_desc_l {
|
line-height: 25px;
|
|
.fuhao {
|
font-size: 12px;
|
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
|
font-weight: 400;
|
color: #fe4a26;
|
}
|
.many {
|
font-size: 18px;
|
font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
|
font-weight: 500;
|
color: #fe4a26;
|
}
|
}
|
.baozhuang {
|
font-size: 13px;
|
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
|
font-weight: 400;
|
color: #868788;
|
}
|
}
|
}
|
}
|
</style>
|
