소스 검색

调整了部分布局,

gujiheimao 2 년 전
부모
커밋
7c12689309
4개의 변경된 파일12개의 추가작업 그리고 12개의 파일을 삭제
  1. 5 6
      src/components/GoodsInfoComponent.vue
  2. 3 1
      src/page/GiftPackDiscounts.vue
  3. 1 2
      src/page/HomeConnent.vue
  4. 3 3
      src/page/index.vue

+ 5 - 6
src/components/GoodsInfoComponent.vue

@@ -2,14 +2,16 @@
   <div class="goods-info">
   <div class="goods-info">
     <!--      //获取图片-->
     <!--      //获取图片-->
     <div class="goods-img"><img :src="getImage(props.goodsInfo.img)" alt=""></div>
     <div class="goods-img"><img :src="getImage(props.goodsInfo.img)" alt=""></div>
-    <div class="goods-name">
-      <span>{{ props.goodsInfo.name }}</span>
+    <div class="goods-name">{{ props.goodsInfo.name }}
     </div>
     </div>
     <div class="goods-price">{{ props.goodsInfo.price }}</div>
     <div class="goods-price">{{ props.goodsInfo.price }}</div>
     <div v-if="props.goodsInfo.originalPrice!==props.goodsInfo.price">
     <div v-if="props.goodsInfo.originalPrice!==props.goodsInfo.price">
-      <div class="goods--original-price">{{ props.goodsInfo.originalPrice }}</div>
+      <div class="goods--original-price">{{ props.goodsInfo.originalPrice }}</div>
       <div class="goods-discount-percentage">{{ props.goodsInfo.discountPercentage }}</div>
       <div class="goods-discount-percentage">{{ props.goodsInfo.discountPercentage }}</div>
     </div>
     </div>
+    <div v-else>
+      <div class="goods--original-price"></div>
+    </div>
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
@@ -97,9 +99,6 @@ function getImage(url: string) {
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;
 
 
-    &::before {
-      content: "¥";
-    }
   }
   }
 
 
   .goods-discount-percentage {
   .goods-discount-percentage {

+ 3 - 1
src/page/GiftPackDiscounts.vue

@@ -33,6 +33,8 @@
   font-size: 12px;
   font-size: 12px;
   margin: 30px auto 50px auto ;
   margin: 30px auto 50px auto ;
   line-height: 18px;
   line-height: 18px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgb(217, 217, 217);
   .gift-pack-title {
   .gift-pack-title {
     font-size: 24px;
     font-size: 24px;
     margin-bottom: 15px;
     margin-bottom: 15px;
@@ -70,7 +72,7 @@
       vertical-align: middle;
       vertical-align: middle;
       padding: 0 3px;
       padding: 0 3px;
       margin: 0 0 0 4px;
       margin: 0 0 0 4px;
-      background: red;
+      background: rgb(223, 30, 28);
       color: white;
       color: white;
       font-weight: bolder;
       font-weight: bolder;
     }
     }

+ 1 - 2
src/page/HomeConnent.vue

@@ -67,9 +67,8 @@ function clickTopRow(url: string) {
 
 
 .home-connect {
 .home-connect {
   width: 1170px;
   width: 1170px;
-  margin: 0 auto;
   color: black;
   color: black;
-
+  margin: 0 auto 50px auto;
   .home-connect-row {
   .home-connect-row {
     display: inline-block;
     display: inline-block;
 
 

+ 3 - 3
src/page/index.vue

@@ -35,8 +35,8 @@
       <!--      首页广告内容-->
       <!--      首页广告内容-->
       <HomeConnect/>
       <HomeConnect/>
       <!--      首页优惠礼包信息-->
       <!--      首页优惠礼包信息-->
-<!--      <GiftPackDiscounts/>-->
-      <hr width="1170" style="margin-bottom: 40px">
+      <GiftPackDiscounts/>
+      <!--      <hr width="1170" style="margin-bottom: 40px;">-->
       <template v-for="item in goodsListArray">
       <template v-for="item in goodsListArray">
         <GoodsTypeComponent :goods-type="item"/>
         <GoodsTypeComponent :goods-type="item"/>
         <GoodsTypeComponent :goods-type="item"/>
         <GoodsTypeComponent :goods-type="item"/>
@@ -94,6 +94,7 @@ import GoodsTypeComponent from "../components/GoodsTypeComponent.vue";
 
 
 import {GoodsInfo, GoodsType} from "../entity/Entity.ts";
 import {GoodsInfo, GoodsType} from "../entity/Entity.ts";
 import {ref} from 'vue'
 import {ref} from 'vue'
+import GiftPackDiscounts from "./GiftPackDiscounts.vue";
 
 
 let showLogin = ref(false)
 let showLogin = ref(false)
 
 
@@ -226,7 +227,6 @@ let goodsListArray = ref([
     height: 100%;
     height: 100%;
     width: 1170px;
     width: 1170px;
     margin: auto auto;
     margin: auto auto;
-
     display: grid;
     display: grid;
     grid-template-columns: 135px 1fr 150px;
     grid-template-columns: 135px 1fr 150px;