修改了一些样式

src/components/geek-xd/components/geek-order/geek-order.vue

@@ -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;
+    padding: 28rpx 18rpx 26rpx 16rpx;
-    border-radius: 10px;
+    border: 1rpx solid rgb(183, 183, 183);
-    height: 320rpx;
+    border-radius: 50rpx;
+    height: 400rpx;
     width: 700rpx;
-    padding: 20rpx;
+    margin: 25rpx;
-    margin: 20rpx;
 
     .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;
+            top: 40rpx;
-            width: 500rpx;
+            left: 178rpx;
-            left: 180rpx;
+
+            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;
+            top: 44rpx;
-            height: 160rpx;
+            right: 0rpx;
-            width: 160rpx;
+
-            top: 70rpx;
+            width: 126rpx;
-            left: 10rpx;
+            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;
+        height: 60rpx;
-        position: absolute;
+        width: 664rpx;
-        bottom: 10rpx;
         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 {
-
+            width: 450rpx;
-            position: absolute;
+            height: 60rpx;
-            right: 10rpx;
+            display: inline-block;
-            bottom: 0;
 
             .geek-btn {
-                border: 1rpx solid black;
+                border: 1rpx solid #E9E9E9;
-                width: 150rpx;
+                width: 140rpx;
-                height: 50rpx;
+                height: 60rpx;
-                border-radius: 100px;
+                border-radius: 80rpx;
-                display: inline-block;
+                opacity: 0.8;
-                margin: 10rpx;
+
-                padding: 6rpx;
+                padding: 10rpx;
+
+                margin-right: 10rpx;
+
                 text-align: center;
+                display: inline-block;
 
             }
 
             .geek-buy {
-                color: red;
+                width: 140rpx;
-                border: 1rpx solid red;
+                height: 60rpx;
-                width: 150rpx;
+                border-radius: 80rpx;
-                height: 50rpx;
+                opacity: 0.8;
-                border-radius: 100px;
+
-                display: inline-block;
+                padding: 10rpx;
-                margin: 10rpx;
+
-                padding: 6rpx;
                 text-align: center;
+                display: inline-block;
+
+                color: #F25E53;
+                border: 1rpx solid #F4DADA;
             }
 
 

src/pages_geek/pages/index/index.vue

@@ -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"
+  <geek-order v-for="item, index in orderList" :key="index" :img="item.img" :label="item.title" :shop="item.shop"
-    :price="item.price" @more="modal.msg('更多')" @again="modal.msg('再次购买')" @return="modal.msg('退换')"
+    :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>