This commit is contained in:
李志鹏
2026-04-21 15:58:10 +08:00
37 changed files with 1161 additions and 6 deletions

View File

@@ -0,0 +1,82 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
url: {
type: String,
default: ''
},
name: {
type: String,
default: 'aaa'
},
price: {
type: String,
default: '111'
}
})
const emit = defineEmits([
'addShopping'
])
let data = reactive({
})
const addShopping = () => {
emit('addShopping')
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
<div class="commodity-item">
<img :src="props.url" alt="">
<div class="detail">
<div calss="text">
<div class="name">
{{ props.name }}
</div>
<div class="price">
{{ props.price }}
</div>
</div>
<div class="btn" @click="addShopping">
<div class="text">
<SvgIcon name="add" size="24"></SvgIcon>
</div>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.commodity-item{
width: var(--commodity-width,100%);
> img{
width: 100%;
height: var(--commodity-height,auto);
margin-bottom: var(--commodity-marginBottom,1rem);
}
> .detail{
display: flex;
justify-content: space-between;
align-items: center;
.text{
color: #232323;
> .name{
font-family: "KaiseiOpti-Regular";
font-weight: 400;
font-size: var(--commodity-name-fontSize,1.6rem);
line-height: var(--commodity-name-lineHeight,2.3rem);
}
> .price{
font-family: "KaiseiOpti-Regular";
font-weight: 400;
font-size: var(--commodity-price-fontSize,1.4rem);
line-height: var(--commodity-price-lineHeight,2.3rem);
}
}
}
}
</style>

62
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<section class="section-footer">
<div class="footer">
<div class="left">
<div>About</div>
<div>Privacy Policy</div>
<div>Terms of Use</div>
<div>Disclaimer</div>
<div>Site Map</div>
</div>
<div class="right">
<img src="@/assets/images/icons/xiaohongshu.png" />
<img src="@/assets/images/icons/linkedin.png" />
<img src="@/assets/images/icons/instagram.png" />
<img src="@/assets/images/icons/facebook.png" />
<img src="@/assets/images/icons/douyin.png" />
<img src="@/assets/images/icons/wechat.png" />
<div class="text">© Code-Create 2026</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
</script>
<style lang="less">
.section-footer {
background-color: #f6f6f6;
border-top: 0.1rem solid #232323;
> .footer {
padding: 0 9rem;
height: var(--footer-height);
display: flex;
align-items: center;
justify-content: space-between;
> .left {
font-family: KaiseiOpti-Regular;
font-size: 1.4rem;
color: #585858;
display: flex;
gap: 4.5rem;
}
> .right {
display: flex;
align-items: center;
> img {
width: 2rem;
height: 2rem;
margin-left: 2rem;
}
.text{
margin-left: 4rem;
font-family: KaiseiOpti-Regular;
font-size: 1.2rem;
color: #585858;
}
}
}
}
</style>