linweidong
/
besure_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改了一些样式

Browse Source
main
D 3 years ago
parent d7fda24452
commit ac224d1ace
2 changed files with 138 additions and 44 deletions
Show Stats Download Patch File Download Diff File

158
src/components/geek-xd/components/geek-order/geek-order.vue
Unescape Escape View File

@ -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;
top: 44rpx;
right: 0rpx;
width: 126rpx;
height: 84rpx;
.geek-sum-1 {
position: absolute;
border-radius: 10px;
height: 160rpx;
width: 160rpx;
top: 70rpx;
left: 10rpx;
top: 0;
left: 0;
font-size: 32rpx;
}
.geek-sum-2 {
position: absolute;
top: 30rpx;
left: 84rpx;
font-size: 20rpx;
}
.geek-footer {
width: 660rpx;
.geek-sum-3 {
position: absolute;
bottom: 10rpx;
top: 55rpx;
left: 46rpx;
font-size: 20rpx;
}
}
}
.geek-footer {
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;
}

24
src/pages_geek/pages/index/index.vue
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save