样式修改

src/views/mall/components/details.vue

@@ -29,9 +29,12 @@
           <!-- 小标题 -->
           <div class="title-introduction">{{ state.goodsInfo?.introduction || '--' }}</div>
           <!-- 价格 -->
-          <div class="prices my-5">
-            <div class="price mr-5"><span>￥</span>{{ selectedSkuPrice}}</div>
-            <div class="marketPrice" v-if="selectedSkuMarketPrice && selectedSkuMarketPrice !== selectedSkuPrice">优惠前￥{{ selectedSkuMarketPrice}}</div>
+          <div class="prices py-4 px-5 my-3" :class="{'activePrices': showActivePrices}">
+            <div class="left">
+              <div class="price mr-5"><span>￥</span>{{ selectedSkuPrice}}</div>
+              <div class="marketPrice" v-if="selectedSkuMarketPrice && selectedSkuMarketPrice !== selectedSkuPrice">优惠前￥{{ selectedSkuMarketPrice}}</div>
+            </div>
+            <div v-if="showActivePrices" class="right">下单送房卷</div>
           </div>
           <!-- 销量 -->
           <div class="salesCount mb-5 parameterColor"><span class="l-s-10">已售</span>：{{ state.goodsInfo?.salesCount || 0 }}</div>
@@ -50,16 +53,16 @@
     <!-- 详情描述 detail-content-card -->
     <v-card class="carousel border-radius-8 white-bgc pa-5 mt-3" style="width: 100%;">
       <div>
-        <div class="mb-3">
+        <!-- <div class="mb-3">
           <v-tabs v-model="describeTab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="null">
             <v-tab :value="0">商品介绍</v-tab>
             <v-tab :value="1">商品评价</v-tab>
             <v-tab :value="2" v-if="showPrize">房券抽奖活动</v-tab>
           </v-tabs>
-        </div>
+        </div> -->
         <describe v-if="describeTab === 0 && state.goodsInfo?.description" :content="state.goodsInfo.description"></describe>
-        <commentCard v-if="describeTab === 1 && state.goodsId" class="detail-comment-selector" :goodsId="state.goodsId" />
-        <prizeDrawContent v-if="describeTab === 2 && lotteryId" :lotteryId="lotteryId" />
+        <!-- <commentCard v-if="describeTab === 1 && state.goodsId" class="detail-comment-selector" :goodsId="state.goodsId" />
+        <prizeDrawContent v-if="describeTab === 2 && lotteryId" :lotteryId="lotteryId" /> -->
       </div>
     </v-card>
   </div>
@@ -86,8 +89,8 @@ import { getProductDetail } from '@/api/mall/product'
 import { addCart } from '@/api/mall/cart'
 import selectSku from './details/s-select-sku.vue'
 import describe from './details/describe.vue'
-import commentCard from './details/detail-comment-card.vue'
-import prizeDrawContent from './details/prizeDrawContent.vue'
+// import commentCard from './details/detail-comment-card.vue'
+// import prizeDrawContent from './details/prizeDrawContent.vue'
 import confirm from './details/order/confirm.vue'
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
@@ -100,7 +103,7 @@ import { getPrizeByGoodsId } from '@/api/mall/prize'
 const router = useRouter()
 const { id } = router.currentRoute.value.params
 
-const describeTab = ref(2)
+const describeTab = ref(0)
 const selectedSkuPicUrl = ref('')
 const selectedSkuPrice = ref('')
 const selectedSkuMarketPrice = ref('')
@@ -109,6 +112,7 @@ const carouselHover = ref(false)
 const showSelectedSkuImg = ref(false)
 
 const showPrize = ref(false)
+const showActivePrices = ref(false) // 下单送房卷
 const lotteryId = ref('')
 // 获取商品详情
 const getData = async () => {
@@ -124,6 +128,8 @@ const getData = async () => {
   // 查询当前商品是否参与抽奖活动
   const data = await getPrizeByGoodsId(id)
   showPrize.value = data && Object.keys(data).length > 0
+  showActivePrices.value = data && Object.keys(data).length > 0
+  
   lotteryId.value = data.id
 }
 getData()
@@ -250,10 +256,24 @@ const loginClose = () => {
 }
 .prices {
   display: flex;
-  align-items: flex-end;
-  color: #ff5000;
+  justify-content: space-between;
   font-size: 28px;
-  margin: 8px 0;
+  border-radius: 8px;
+  width: 80%;
+  color: #ff5000;
+  .left {
+    display: flex;
+    align-items: flex-end;
+  }
+  .right {
+    font-size: 18px;
+    padding-top: 10px;
+    font-weight: 400;
+  }
+}
+.activePrices {
+  color: #fff;
+  background-color: #fb0037;
 }
 .price {
   font-weight: 600;

src/views/mall/components/details/s-select-sku.vue

@@ -8,15 +8,14 @@
         <v-chip
           class="spec-btn mb-1 mr-3"
           :class="[
-            { 'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id, },
+            state.currentPropertyArray[property.id] === value.id ? 'ui-BG-Main-Gradient' : 'ui-BG-Main-Normal',
             { 'disabled-btn': value.disabled === true, },
           ]"
           v-for="value in property.values"
           :key="value.id"
-          size="small"
           label
           density="comfortable"
-          color="grey"
+          color="#777"
           variant="outlined"
           :disabled="value.disabled === true"
           @click="onSelectSku(property.id, value.id)"
@@ -277,8 +276,13 @@ const props = defineProps({
   // 主题色渐变，横向
   .ui-BG-Main-Gradient {
     // background: linear-gradient(90deg, #ff3000, #ff300099);
-    background: var(--v-primary-base);
-    color: #fff !important;
+    // background: var(--v-primary-base);
+    border: 1px solid #ff5000;
+    color:  #ff5000 !important;
+  }
+  .ui-BG-Main-Normal {
+    border: 1px solid #dadde0;
+    color: #11192d !important;
   }
   .disabled-btn {
     color: #c6c6c6;