139 lines
5.6 KiB
Vue
139 lines
5.6 KiB
Vue
<template>
|
|
<div class="">
|
|
<div>
|
|
<van-row gutter="20">
|
|
<van-col v-for="(item, index) in info" :key="index" span="11" class="market-item">
|
|
<div class="content">
|
|
<div class="title fw-bold fs-14">
|
|
<div class="flex align-center">
|
|
<svg
|
|
t="1741943948491"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="2494"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<path
|
|
d="M1024 354c0-1.8-0.2-3.6-0.5-5.4V158c0-51.8-42.2-94-94-94H798V30c0-16.5-13.5-30-30-30s-30 13.5-30 30v34H286V30c0-16.5-13.5-30-30-30s-30 13.5-30 30v34H94.5c-51.8 0-94 42.2-94 94v190.6c-0.3 1.8-0.5 3.6-0.5 5.4 0 1.8 0.2 3.6 0.5 5.4V930c0 51.8 42.2 94 94 94h835c51.8 0 94-42.2 94-94V359.4c0.3-1.8 0.5-3.6 0.5-5.4zM94.5 124H226v38c0 16.5 13.5 30 30 30s30-13.5 30-30v-38h452v38c0 16.5 13.5 30 30 30s30-13.5 30-30v-38h131.5c18.7 0 34 15.3 34 34v166h-903V158c0-18.7 15.3-34 34-34z m835 840h-835c-18.7 0-34-15.3-34-34V384h903v546c0 18.7-15.3 34-34 34z"
|
|
fill="#03B03C"
|
|
p-id="2495"
|
|
/>
|
|
<path
|
|
d="M697.3 511.6L444.1 764.8 326.7 647.4c-11.7-11.7-30.8-11.7-42.4 0-11.7 11.7-11.7 30.8 0 42.4l138.6 138.6c7.6 7.6 18.3 10.2 28.1 8 0.2 0 0.4-0.1 0.6-0.1 5.1-1.3 9.8-3.9 13.8-7.8L739.7 554c11.7-11.7 11.7-30.8 0-42.4-11.7-11.7-30.8-11.7-42.4 0z"
|
|
fill="#03B03C"
|
|
p-id="2496"
|
|
/>
|
|
</svg>
|
|
<p class="title_con">{{ item.title }}</p>
|
|
</div>
|
|
<svg
|
|
t="1741944281591"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="3990"
|
|
width="16"
|
|
height="16"
|
|
>
|
|
<path
|
|
d="M607.897867 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L575.903242 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 351.94087C639.892491 753.593818 625.61532 768.043004 607.897867 768.043004z"
|
|
fill="#d81e06"
|
|
p-id="3991"
|
|
/>
|
|
<path
|
|
d="M415.930119 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L383.935495 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 351.94087C447.924744 753.593818 433.647573 768.043004 415.930119 768.043004z"
|
|
fill="#d81e06"
|
|
p-id="3992"
|
|
/>
|
|
<path
|
|
d="M928.016126 223.962372l-159.973123 0L768.043004 159.973123c0-52.980346-42.659499-95.983874-95.295817-95.983874L351.94087 63.989249c-52.980346 0-95.983874 43.003528-95.983874 95.983874l0 63.989249-159.973123 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625s14.277171 31.994625 31.994625 31.994625l832.032253 0c17.717453 0 31.994625-14.277171 31.994625-31.994625S945.73358 223.962372 928.016126 223.962372zM319.946246 159.973123c0-17.545439 14.449185-31.994625 31.994625-31.994625l320.806316 0c17.545439 0 31.306568 14.105157 31.306568 31.994625l0 63.989249L319.946246 223.962372 319.946246 159.973123 319.946246 159.973123z"
|
|
fill="#d81e06"
|
|
p-id="3993"
|
|
/>
|
|
<path
|
|
d="M736.048379 960.010751 288.123635 960.010751c-52.980346 0-95.983874-43.003528-95.983874-95.983874L192.139761 383.591466c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 480.435411c0 17.717453 14.449185 31.994625 31.994625 31.994625l448.096758 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L768.215018 384.795565c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 479.231312C832.032253 916.835209 789.028725 960.010751 736.048379 960.010751z"
|
|
fill="#d81e06"
|
|
p-id="3994"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="desc flex space-between">
|
|
<div>
|
|
<p>创建人</p>
|
|
<p class="fw-bold">{{ item.created_user }}</p>
|
|
</div>
|
|
<div>
|
|
<p>引用次数</p>
|
|
<p class="fw-bold">{{ item.quote_nums }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-col>
|
|
</van-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
const { info } = defineProps({
|
|
info: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.market-item {
|
|
//margin-right: 4%;
|
|
box-sizing: border-box;
|
|
margin-bottom: 12px;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
// 偶数项的 margin-right 设置为 0
|
|
&:nth-child(even) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.content {
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
color: #000;
|
|
|
|
.title_con {
|
|
display: block;
|
|
overflow: hidden;
|
|
max-width: 100px;
|
|
margin-left: 4px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
color: #666;
|
|
font-size: 12px;
|
|
|
|
div p:last-child {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|