修改了一些样式
This commit is contained in:
D
parent
d7fda24452
commit
ac224d1ace
@ -7,6 +7,11 @@
|
||||
<view class="geek-content">
|
||||
<image class="geek-img" :src="img"></image>
|
||||
<view class="geek-label">{{ label }}</view>
|
||||
<view class="geek-sum">
|
||||
<view class=".geek-sum-1">￥{{ number.integerPart }}</view>
|
||||
<view class=".geek-sum-2">. {{ number.decimalPart }}</view>
|
||||
<view class=".geek-sum-3">共 {{ num }} 件</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="geek-footer">
|
||||
<view class="geek-more" @click="$emit('more')">更多</view>
|
||||
@ -19,6 +24,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
shop: {
|
||||
@ -41,24 +47,51 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
num: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
}
|
||||
})
|
||||
|
||||
const number = computed(() => {
|
||||
return formatNumber(props.price, 2)
|
||||
})
|
||||
|
||||
function formatNumber(num, place) {
|
||||
|
||||
let fixedNum = Number(num).toFixed(place); // 将数字保留两位小数
|
||||
let parts = fixedNum.split('.'); // 拆分整数部分和小数部分
|
||||
let integerPart = parts[0]; // 整数部分
|
||||
let decimalPart = parts[1]; // 小数部分
|
||||
|
||||
// 使用padStart方法补0到小数部分
|
||||
decimalPart = decimalPart.padStart(place, '0');
|
||||
|
||||
return {
|
||||
integerPart, decimalPart
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.geek-card {
|
||||
border: 1rpx solid rgb(183, 183, 183);
|
||||
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border-radius: 10px;
|
||||
height: 320rpx;
|
||||
padding: 28rpx 18rpx 26rpx 16rpx;
|
||||
border: 1rpx solid rgb(183, 183, 183);
|
||||
border-radius: 50rpx;
|
||||
height: 400rpx;
|
||||
width: 700rpx;
|
||||
padding: 20rpx;
|
||||
margin: 20rpx;
|
||||
margin: 25rpx;
|
||||
|
||||
.geek-header {
|
||||
height: 60rpx;
|
||||
width: 664rpx;
|
||||
margin-bottom: 6rpx;
|
||||
|
||||
.geek-shop {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
@ -68,6 +101,7 @@ const props = defineProps({
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
font-size: 25rpx;
|
||||
@ -76,11 +110,26 @@ const props = defineProps({
|
||||
}
|
||||
|
||||
.geek-content {
|
||||
position: relative;
|
||||
|
||||
margin-bottom: 46rpx;
|
||||
height: 170rpx;
|
||||
width: 664rpx;
|
||||
|
||||
.geek-img {
|
||||
border-radius: 30rpx;
|
||||
height: 170rpx;
|
||||
width: 170rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.geek-label {
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
width: 500rpx;
|
||||
left: 180rpx;
|
||||
top: 40rpx;
|
||||
left: 178rpx;
|
||||
|
||||
width: 350rpx;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
@ -88,54 +137,87 @@ const props = defineProps({
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.geek-img {
|
||||
.geek-sum {
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
height: 160rpx;
|
||||
width: 160rpx;
|
||||
top: 70rpx;
|
||||
left: 10rpx;
|
||||
top: 44rpx;
|
||||
right: 0rpx;
|
||||
|
||||
width: 126rpx;
|
||||
height: 84rpx;
|
||||
|
||||
.geek-sum-1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.geek-sum-2 {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
left: 84rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.geek-sum-3 {
|
||||
position: absolute;
|
||||
top: 55rpx;
|
||||
left: 46rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.geek-footer {
|
||||
width: 660rpx;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
height: 60rpx;
|
||||
width: 664rpx;
|
||||
font-size: 25rpx;
|
||||
|
||||
.geek-more {
|
||||
margin-bottom: 20rpx;
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 110rpx;
|
||||
|
||||
padding: 10rpx;
|
||||
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.geek-buttonGroup {
|
||||
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
bottom: 0;
|
||||
width: 450rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
|
||||
.geek-btn {
|
||||
border: 1rpx solid black;
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 100px;
|
||||
display: inline-block;
|
||||
margin: 10rpx;
|
||||
padding: 6rpx;
|
||||
border: 1rpx solid #E9E9E9;
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 80rpx;
|
||||
opacity: 0.8;
|
||||
|
||||
padding: 10rpx;
|
||||
|
||||
margin-right: 10rpx;
|
||||
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.geek-buy {
|
||||
color: red;
|
||||
border: 1rpx solid red;
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 100px;
|
||||
display: inline-block;
|
||||
margin: 10rpx;
|
||||
padding: 6rpx;
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 80rpx;
|
||||
opacity: 0.8;
|
||||
|
||||
padding: 10rpx;
|
||||
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
color: #F25E53;
|
||||
border: 1rpx solid #F4DADA;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -23,14 +23,14 @@
|
||||
|
||||
<uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
|
||||
<geek-commodity v-for="item, index in commodityList" :key="index" :price="item.price" :title="item.title"
|
||||
:sub-title="item.subTitle" :img="item.img" type="line" @click="modal.msg(item.title)" />
|
||||
:num="item.num" :sub-title="item.subTitle" :img="item.img" type="line" @click="modal.msg(item.title)" />
|
||||
<geek-commodity v-for="item, index in commodityList" :key="index" :price="item.price" :title="item.title"
|
||||
:sub-title="item.subTitle" :img="item.img" type="rect" @click="modal.msg(item.title)" />
|
||||
:num="item.num" :sub-title="item.subTitle" :img="item.img" type="rect" @click="modal.msg(item.title)" />
|
||||
|
||||
|
||||
<uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
|
||||
<geek-order v-for="item, index in orderList" :img="item.img" :label="item.title" :shop="item.shop" :status="item.status"
|
||||
:price="item.price" @more="modal.msg('更多')" @again="modal.msg('再次购买')" @return="modal.msg('退换')"
|
||||
<geek-order v-for="item, index in orderList" :key="index" :img="item.img" :label="item.title" :shop="item.shop"
|
||||
:status="item.status" :price="item.price" @more="modal.msg('更多')" @again="modal.msg('再次购买')" @return="modal.msg('退换')"
|
||||
@sell="modal.msg('卖了换钱')"></geek-order>
|
||||
</template>
|
||||
|
||||
@ -75,7 +75,9 @@ const orderList = [
|
||||
img: '/static/images/banner/banner01.jpg',
|
||||
title: '商品1',
|
||||
subTitle: '商品1简介',
|
||||
price: 100,
|
||||
price: 100.32,
|
||||
num: 10
|
||||
|
||||
},
|
||||
{
|
||||
shop: 'geek自营旗舰店',
|
||||
@ -83,7 +85,17 @@ const orderList = [
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
|
||||
subTitle: '商品3简介',
|
||||
price: 200,
|
||||
price: 2000.67,
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
shop: 'geek自营旗舰店',
|
||||
status: '已取消',
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
|
||||
subTitle: '商品3简介',
|
||||
price: 10.67,
|
||||
num: 10
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user