finished all

upangka · Dec 8, 2022 · ca34d49 · ca34d49
1 parent 7a0d1f6
commit ca34d49
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 2 deletions.
diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
@@ -15,6 +15,10 @@ ul {
     list-style: none;
 }
 
+a{
+  text-decoration: none;
+  color: #333;
+}
 
 // 容器的宽度
 .container{

diff --git a/src/components/home/product/HomeGoods.vue b/src/components/home/product/HomeGoods.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="goods-item">
+    <RounterLink to="/" class="image">
+      <img
+        src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_1.jpg"
+        alt=""
+      />
+    </RounterLink>
+    <p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
+    <p class="desc ellipsis">海鲜年货</p>
+    <p class="price">
+      <PriceIcon price="109.00"></PriceIcon>
+    </p>
+
+    <div class="extra">
+      <RouterLink to="/">
+        <span>找相似</span>
+        <span>发现更多宝贝 &gt;</span>
+      </RouterLink>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import PriceIcon from "@/components/libraries/icons/PriceIcon.vue"
+</script>
+<style lang="scss" scoped>
+.goods-item {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 3rem;
+  align-items: center;
+  width: 24rem;
+  height: 30rem;
+  margin-bottom: 1rem;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid transparent;
+
+  .image {
+    display: block;
+    width: 16rem;
+    height: 16rem;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  p {
+    margin-top: 0.6rem;
+    font-size: 1.5rem;
+    width: 100%;
+
+    &.name {
+      height: 4.4rem;
+    }
+
+    &.desc {
+      color: #666;
+    }
+
+    &.price {
+      font-size: 1.8rem;
+    }
+  }
+
+  &:hover {
+    border-color: $theme-primary-color;
+    .extra {
+      transform: none;
+    }
+  }
+
+  .extra {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 8.6rem;
+    background-color: $theme-primary-color;
+    text-align: center;
+    transform: translate3d(0, 100%, 0);
+    transition: all 0.5s;
+
+    span {
+      display: block;
+      width: 12rem;
+      margin: 0 auto;
+      color: #fff;
+      font-size: 1.3rem;
+      line-height: 3rem;
+
+      &:first-child {
+        font-size: 1.8rem;
+        border-bottom: 0.1rem solid #fff;
+        line-height: 4rem;
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/home/product/HomeProduct.vue b/src/components/home/product/HomeProduct.vue
@@ -0,0 +1,45 @@
+<template>
+  <PanelComponent main-title="居家">
+    <template #right>
+      <div class="sub-links">
+        <RouterLink to="/">海鲜</RouterLink>
+        <RouterLink to="/">水果</RouterLink>
+        <RouterLink to="/">蔬菜</RouterLink>
+        <RouterLink to="/">水产</RouterLink>
+        <RouterLink to="/">禽肉</RouterLink>
+      </div>
+      <LookMore></LookMore>
+    </template>
+
+    <section class="content-wrapper">
+      <RouterLink class="cover" to="/">
+        <img
+          src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_cover.jpg"
+          alt=""
+        />
+        <strong class="label">
+          <span>生鲜馆</span>
+          <span>全场3件7折</span>
+        </strong>
+      </RouterLink>
+      <ul class="goods__list-wrapper">
+        <li class="goods" v-for="i in 10" :key="i">
+          <HomeGoods></HomeGoods>
+        </li>
+      </ul>
+    </section>
+  </PanelComponent>
+</template>
+<script lang="ts" setup>
+import HomeGoods from "@/components/home/product/HomeGoods.vue"
+</script>
+<style lang="scss" scoped>
+.sub-links {
+  flex: 1;
+  a {
+    font-size: 1.6rem;
+    text-decoration: none;
+    padding: 0.2rem 2rem;
+  }
+}
+</style>
diff --git a/src/components/libraries/icons/PriceIcon.vue b/src/components/libraries/icons/PriceIcon.vue
@@ -1,5 +1,8 @@
 <template>
-  <p class="price"><i>¥</i>{{ price }}</p>
+  <p class="price">
+    <i>{{ unit }}</i
+    >{{ price }}
+  </p>
 </template>
 
 <script setup lang="ts">
@@ -8,6 +11,10 @@ defineProps({
     type: String,
     required: true,
   },
+  unit: {
+    type: String,
+    default: "¥",
+  },
 })
 </script>
 

diff --git a/src/components/libraries/panel/PanelComponent.vue b/src/components/libraries/panel/PanelComponent.vue
@@ -37,7 +37,7 @@ withDefaults(defineProps<Props>(), {
       font-weight: normal;
       height: 3.5rem;
       line-height: 3.5rem;
-
+      flex: 1;
       small {
         font-size: 1.6rem;
         margin-left: 2rem;

diff --git a/src/views/home/HomeLayout.vue b/src/views/home/HomeLayout.vue
@@ -6,9 +6,14 @@
     </section>
 
     <section>
+      <!-- 新鲜好物 -->
       <HomeNew></HomeNew>
+      <!-- 人气推荐 -->
       <HomeHot></HomeHot>
+      <!-- 品牌推荐 -->
       <HomeBrand></HomeBrand>
+      <!-- 商品专区 -->
+      <HomeProduct></HomeProduct>
     </section>
   </div>
 </template>
@@ -18,6 +23,7 @@ import HomeCategory from "@/components/home/HomeCategory.vue"
 import HomeNew from "@/components/home/HomeNew.vue"
 import HomeHot from "@/components/home/HomeHot.vue"
 import HomeBrand from "@/components/home/HomeBrand.vue"
+import HomeProduct from "@/components/home/product/HomeProduct.vue"
 </script>
 
 <style lang="scss" scoped></style>