【vue3.0】5.0 某東到家（五）——首頁(yè)收尾以及組件合理拆分

當(dāng)前src/App.vue完整代碼如下：

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <!-- 頂部位置信息左敌、通知欄 -->
    <div class="position">
      <span>
        <i class="position__icon custom-icon custom-icon-position"></i>
      </span>
      西安交通大學(xué)興慶校區(qū)梧桐苑食堂北側(cè)小院子放臺(tái)階上
      <i class="position__notice custom-icon custom-icon-bell"></i>
    </div>
    <!-- 搜索欄 -->
    <div class="search">
      <span class="search__icon">
        <i class="custom-icon custom-icon-search"></i>
      </span>
      <span class="search__text"> 黃燜雞米飯</span>
    </div>
    <!-- 橫幅廣告推廣欄 -->
    <div class="banner">
      <img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
    </div>
    <!-- 分類列表欄 -->
    <div class="category_list">
      <!-- 10個(gè) -->
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/超市.png"
        />
        <p class="category_list__item__desc">超市便利</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/菜市場(chǎng).png"
        />
        <p class="category_list__item__desc">菜市場(chǎng)</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/水果店.png"
        />
        <p class="category_list__item__desc">水果店</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/鮮花.png"
        />
        <p class="category_list__item__desc">鮮花綠植</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/醫(yī)藥健康.png"
        />
        <p class="category_list__item__desc">醫(yī)藥健康</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/家居.png"
        />
        <p class="category_list__item__desc">家居時(shí)尚</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/蛋糕.png"
        />
        <p class="category_list__item__desc">烘焙蛋糕</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/簽到.png"
        />
        <p class="category_list__item__desc">簽到</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/大牌免運(yùn).png"
        />
        <p class="category_list__item__desc">大牌免運(yùn)</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/紅包.png"
        />
        <p class="category_list__item__desc">紅包套餐</p>
      </div>
    </div>
    <!-- 灰色留白分隔欄 -->
    <div class="gap"></div>
  </div>
  <!-- 底部主菜單容器 -->
  <div class="docker">
    <span class="docker__item docker__item--active">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-home"></i>
      </div>
      <div class="docker__item__title">首頁(yè)</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-shopping"></i>
      </div>
      <div class="docker__item__title">購(gòu)物車</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-order"></i>
      </div>
      <div class="docker__item__title">訂單</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-my"></i>
      </div>
      <div class="docker__item__title">我的</div>
    </span>
  </div>
  <router-view />
</template>

<style lang="scss">
@import './style/viriables';
@import './style/mixins';
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  padding: 0 0.18rem;
}
.position {
  //文字顯示省略號(hào)配置
  @include ellipsis;
  // 其他一般設(shè)定
  position: relative;
  padding: 0.16rem 0.24rem 0.16rem 0;
  line-height: 0.22rem;
  font-size: 0.16rem;
  color: $content-font-color;
  .position__icon {
    position: relative;
    top: 0.01rem;
    font-size: 0.2rem;
    margin-right: 0.08rem;
  }
  .position__notice {
    top: 0.17rem;
    right: 0;
    position: absolute;
    font-size: 0.2rem;
  }
}

.search {
  margin-bottom: 0.12rem;
  line-height: 0.32rem; //行高：將會(huì)自動(dòng)撐開
  background: #f5f5f5;
  color: #b7b7b7;
  border-radius: 0.16rem;
  font-size: 0.14rem;
  &__icon {
    display: inline-block;
    padding: 0 0.05rem 0 0.16rem;
    font-size: 0.15rem;
  }
  &__text {
    display: inline-block;
    font-size: 0.14rem;
  }
}
.banner {
  height: 0%;
  overflow: hidden;
  padding-bottom: 25%; //屏幕寬度的25%
  &__img {
    width: 100%;
  }
}
.category_list {
  display: flex; //flex布局:彈性盒
  flex-wrap: wrap; //讓彈性盒元素在必要的時(shí)候拆行
  margin-top: 0.16rem;
  &__item {
    width: 20%;
    &__img {
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin: 0 auto;
    }
    &__desc {
      margin: 0.06rem 0 0.16rem 0;
      text-align: center;
      color: $content-font-color;
    }
  }
}
.gap {
  height: 0.1rem;
  background: $content-bg-color;
  margin: 0 -0.18rem;
}
.docker {
  color: $content-font-color;
  display: flex; //自適應(yīng)均贈(zèng),彈性盒子
  position: absolute; //絕對(duì)定位
  box-sizing: border-box; //這個(gè)會(huì)以body的最外層作為容器的最外層
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid $content-bg-color;
  &__item {
    flex: 1;
    text-align: center;
    &--active {
      color: #1fa4fc;
    }
    &_icon {
      margin: 0.05rem 0 0.02rem 0; //圖標(biāo)距離上邊距7px左右;
      font-size: 0.18rem;
    }
    &__title {
      //瀏覽器最小像素是12px荷逞，如果想表達(dá)12px以下大小得如下編寫
      font-size: 0.12rem;
      transform: scale(0.5 0.5); //橫向縮小50% 縱向搜小50%
      transform-origin: center top; //縮放的中心點(diǎn)
    }
  }
}
</style>

增加主體商鋪內(nèi)容：

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <!-- 頂部位置信息、通知欄 -->
    <div class="position">
......
    </div>
    <!-- 搜索欄 -->
    <div class="search">
      ......
    </div>
    <!-- 橫幅廣告推廣欄 -->
    <div class="banner">
   ......
    </div>
    <!-- 分類列表欄 -->
    <div class="category_list">
    ......
    </div>
    <!-- 灰色留白分隔欄 -->
    <div class="gap"></div>
    <!-- 主體商鋪展示內(nèi)容 -->
    <div class="nearby">
      <h3 class="nearby__title">附近店鋪</h3>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
    </div>
  </div>
......

效果如下：

image.png

調(diào)整樣式：

......
.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    color: $content-font-color;
    font-weight: normal; //不加粗展示
  }
  &__item {
    display: flex;
    &__img {
      width: 0.56rem;
      height: 0.56rem;
    }
  }
}
.docker {
......
}

image.png

進(jìn)一步調(diào)整

.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    color: $content-font-color;
    font-weight: normal; //不加粗展示
  }
  &__item {
    display: flex;
    padding-top: 0.12rem;
    // 圖片
    &__img {
      margin-right: 0.16rem;
      width: 0.56rem;
      height: 0.56rem;
    }
    //右側(cè)文字內(nèi)容
    &__content {
      flex: 1;
      &__title {
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
    }
  }
}

image.png

進(jìn)一步優(yōu)化：

.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    color: $content-font-color;
    font-weight: normal; //不加粗展示
  }
  &__item {
    display: flex;
    padding-top: 0.12rem;
    // 圖片
    &__img {
      margin-right: 0.16rem;
      width: 0.56rem;
      height: 0.56rem;
    }
    //右側(cè)文字內(nèi)容
    &__content {
      flex: 1;
      &__title {
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__tags {
        margin-top: 0.08rem;
        line-height: 0.18rem;
        font-size: 0.13rem;
        color: $content-font-color;
      }
      &__tag {
        margin-right: 0.16rem;
      }
    }
  }
}

image.png

進(jìn)一步優(yōu)化：

.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    color: $content-font-color;
    font-weight: normal; //不加粗展示
  }
  &__item {
    display: flex;
    padding-top: 0.12rem;

    // 圖片
    &__img {
      margin-right: 0.16rem;
      width: 0.56rem;
      height: 0.56rem;
    }
    //右側(cè)文字內(nèi)容
    &__content {
      padding-bottom: 0.12rem;
      border-bottom: 1px solid $content-bg-color;
      flex: 1;
      &__title {
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__tags {
        margin-top: 0.08rem;
        line-height: 0.18rem;
        font-size: 0.13rem;
        color: $content-font-color;
      }
      &__tag {
        margin-right: 0.16rem;
      }
      &__highlight {
        color: #e93b3b;
        line-height: 0.18rem;
        font-size: 0.13rem;
        margin: 0.08rem 0 0 0;
      }
    }
  }
}

image.png

到此附近店鋪設(shè)計(jì)完畢，復(fù)制模塊組多個(gè),到此完整代碼為：

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <!-- 頂部位置信息朱灿、通知欄 -->
    <div class="position">
      <span>
        <i class="position__icon custom-icon custom-icon-position"></i>
      </span>
      西安交通大學(xué)興慶校區(qū)梧桐苑食堂北側(cè)小院子放臺(tái)階上
      <i class="position__notice custom-icon custom-icon-bell"></i>
    </div>
    <!-- 搜索欄 -->
    <div class="search">
      <span class="search__icon">
        <i class="custom-icon custom-icon-search"></i>
      </span>
      <span class="search__text"> 黃燜雞米飯</span>
    </div>
    <!-- 橫幅廣告推廣欄 -->
    <div class="banner">
      <img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
    </div>
    <!-- 分類列表欄 -->
    <div class="category_list">
      <!-- 10個(gè) -->
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/超市.png"
        />
        <p class="category_list__item__desc">超市便利</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/菜市場(chǎng).png"
        />
        <p class="category_list__item__desc">菜市場(chǎng)</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/水果店.png"
        />
        <p class="category_list__item__desc">水果店</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/鮮花.png"
        />
        <p class="category_list__item__desc">鮮花綠植</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/醫(yī)藥健康.png"
        />
        <p class="category_list__item__desc">醫(yī)藥健康</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/家居.png"
        />
        <p class="category_list__item__desc">家居時(shí)尚</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/蛋糕.png"
        />
        <p class="category_list__item__desc">烘焙蛋糕</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/簽到.png"
        />
        <p class="category_list__item__desc">簽到</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/大牌免運(yùn).png"
        />
        <p class="category_list__item__desc">大牌免運(yùn)</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/紅包.png"
        />
        <p class="category_list__item__desc">紅包套餐</p>
      </div>
    </div>
    <!-- 灰色留白分隔欄 -->
    <div class="gap"></div>
    <!-- 主體商鋪展示內(nèi)容 -->
    <div class="nearby">
      <h3 class="nearby__title">附近店鋪</h3>
      <!-- 5個(gè) -->
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部主菜單容器 -->
  <div class="docker">
    <span class="docker__item docker__item--active">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-home"></i>
      </div>
      <div class="docker__item__title">首頁(yè)</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-shopping"></i>
      </div>
      <div class="docker__item__title">購(gòu)物車</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-order"></i>
      </div>
      <div class="docker__item__title">訂單</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-my"></i>
      </div>
      <div class="docker__item__title">我的</div>
    </span>
  </div>
  <router-view />
</template>

<style lang="scss">
@import './style/viriables';
@import './style/mixins';
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  padding: 0 0.18rem;
}
.position {
  //文字顯示省略號(hào)配置
  @include ellipsis;
  // 其他一般設(shè)定
  position: relative;
  padding: 0.16rem 0.24rem 0.16rem 0;
  line-height: 0.22rem;
  font-size: 0.16rem;
  color: $content-font-color;
  .position__icon {
    position: relative;
    top: 0.01rem;
    font-size: 0.2rem;
    margin-right: 0.08rem;
  }
  .position__notice {
    top: 0.17rem;
    right: 0;
    position: absolute;
    font-size: 0.2rem;
  }
}

.search {
  margin-bottom: 0.12rem;
  line-height: 0.32rem; //行高：將會(huì)自動(dòng)撐開
  background: #f5f5f5;
  color: #b7b7b7;
  border-radius: 0.16rem;
  font-size: 0.14rem;
  &__icon {
    display: inline-block;
    padding: 0 0.05rem 0 0.16rem;
    font-size: 0.15rem;
  }
  &__text {
    display: inline-block;
    font-size: 0.14rem;
  }
}
.banner {
  height: 0%;
  overflow: hidden;
  padding-bottom: 25%; //屏幕寬度的25%
  &__img {
    width: 100%;
  }
}
.category_list {
  display: flex; //flex布局:彈性盒
  flex-wrap: wrap; //讓彈性盒元素在必要的時(shí)候拆行
  margin-top: 0.16rem;
  &__item {
    width: 20%;
    &__img {
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin: 0 auto;
    }
    &__desc {
      margin: 0.06rem 0 0.16rem 0;
      text-align: center;
      color: $content-font-color;
    }
  }
}
.gap {
  height: 0.1rem;
  background: $content-bg-color;
  margin: 0 -0.18rem;
}
.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    color: $content-font-color;
    font-weight: normal; //不加粗展示
  }
  &__item {
    display: flex;
    padding-top: 0.12rem;

    // 圖片
    &__img {
      margin-right: 0.16rem;
      width: 0.56rem;
      height: 0.56rem;
    }
    //右側(cè)文字內(nèi)容
    &__content {
      padding-bottom: 0.12rem;
      border-bottom: 1px solid $content-bg-color;
      flex: 1;
      &__title {
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__tags {
        margin-top: 0.08rem;
        line-height: 0.18rem;
        font-size: 0.13rem;
        color: $content-font-color;
      }
      &__tag {
        margin-right: 0.16rem;
      }
      &__highlight {
        color: #e93b3b;
        line-height: 0.18rem;
        font-size: 0.13rem;
        margin: 0.08rem 0 0 0;
      }
    }
  }
}
.docker {
  color: $content-font-color;
  display: flex; //自適應(yīng)均贈(zèng),彈性盒子
  position: absolute; //絕對(duì)定位
  box-sizing: border-box; //這個(gè)會(huì)以body的最外層作為容器的最外層
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid $content-bg-color;
  &__item {
    flex: 1;
    text-align: center;
    &--active {
      color: #1fa4fc;
    }
    &_icon {
      margin: 0.05rem 0 0.02rem 0; //圖標(biāo)距離上邊距7px左右;
      font-size: 0.18rem;
    }
    &__title {
      //瀏覽器最小像素是12px报账，如果想表達(dá)12px以下大小得如下編寫
      font-size: 0.12rem;
      transform: scale(0.5 0.5); //橫向縮小50% 縱向搜小50%
      transform-origin: center top; //縮放的中心點(diǎn)
    }
  }
}
</style>

image.png

這里發(fā)現(xiàn)數(shù)據(jù)溢出屏幕纵势，解決方案如下：

.wrapper {
  overflow-y: auto;
......
}

image.png

當(dāng)然，還可以附近店鋪底部留白會(huì)好看一些：

.wrapper {
  padding: 0 0.18rem 0.1rem 0.18rem;
......
}

組件的合理拆分

到此為止泽疆，首頁(yè)代碼已經(jīng)接近400行户矢，以后維護(hù)會(huì)相當(dāng)困難。
新建src\views\home\Home.vue:
將src/App.vue復(fù)制到src\views\home\Home.vue
修改src/App.vue:

<template>
  <Home />
</template>

<script>
import Home from '@/views/home/Home'
export default {
  name: 'App',
  components: { Home }
}
</script>

src\views\home\Home.vue:

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <!-- 頂部位置信息殉疼、通知欄 -->
    <div class="position">
      <span>
        <i class="position__icon custom-icon custom-icon-position"></i>
      </span>
      西安交通大學(xué)興慶校區(qū)梧桐苑食堂北側(cè)小院子放臺(tái)階上
      <i class="position__notice custom-icon custom-icon-bell"></i>
    </div>
    <!-- 搜索欄 -->
    <div class="search">
      <span class="search__icon">
        <i class="custom-icon custom-icon-search"></i>
      </span>
      <span class="search__text"> 黃燜雞米飯</span>
    </div>
    <!-- 橫幅廣告推廣欄 -->
    <div class="banner">
      <img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
    </div>
    <!-- 分類列表欄 -->
    <div class="category_list">
      <!-- 10個(gè) -->
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/超市.png"
        />
        <p class="category_list__item__desc">超市便利</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/菜市場(chǎng).png"
        />
        <p class="category_list__item__desc">菜市場(chǎng)</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/水果店.png"
        />
        <p class="category_list__item__desc">水果店</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/鮮花.png"
        />
        <p class="category_list__item__desc">鮮花綠植</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/醫(yī)藥健康.png"
        />
        <p class="category_list__item__desc">醫(yī)藥健康</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/家居.png"
        />
        <p class="category_list__item__desc">家居時(shí)尚</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/蛋糕.png"
        />
        <p class="category_list__item__desc">烘焙蛋糕</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/簽到.png"
        />
        <p class="category_list__item__desc">簽到</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/大牌免運(yùn).png"
        />
        <p class="category_list__item__desc">大牌免運(yùn)</p>
      </div>
      <div class="category_list__item">
        <img
          class="category_list__item__img"
          src="/i18n/9_16/img/category_list/紅包.png"
        />
        <p class="category_list__item__desc">紅包套餐</p>
      </div>
    </div>
    <!-- 灰色留白分隔欄 -->
    <div class="gap"></div>
    <!-- 主體商鋪展示內(nèi)容 -->
    <div class="nearby">
      <h3 class="nearby__title">附近店鋪</h3>
      <!-- 5個(gè) -->
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
      <div class="nearby__item">
        <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
        <div class="nearby__item__content">
          <div class="nearby__item__content__title">某爾瑪</div>
          <div class="nearby__item__content__tags">
            <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
            <span class="nearby__item__content__tag">起送￥0</span>
            <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
          </div>
          <p class="nearby__item__content__highlight">
            VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部主菜單容器 -->
  <div class="docker">
    <span class="docker__item docker__item--active">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-home"></i>
      </div>
      <div class="docker__item__title">首頁(yè)</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-shopping"></i>
      </div>
      <div class="docker__item__title">購(gòu)物車</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-order"></i>
      </div>
      <div class="docker__item__title">訂單</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-my"></i>
      </div>
      <div class="docker__item__title">我的</div>
    </span>
  </div>
  <router-view />
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style lang="scss">
@import '@/style/viriables';
@import '@/style/mixins';
.wrapper {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  padding: 0 0.18rem 0.1rem 0.18rem;
}
.position {
  //文字顯示省略號(hào)配置
  @include ellipsis;
  // 其他一般設(shè)定
  position: relative;
  padding: 0.16rem 0.24rem 0.16rem 0;
  line-height: 0.22rem;
  font-size: 0.16rem;
  color: $content-font-color;
  .position__icon {
    position: relative;
    top: 0.01rem;
    font-size: 0.2rem;
    margin-right: 0.08rem;
  }
  .position__notice {
    top: 0.17rem;
    right: 0;
    position: absolute;
    font-size: 0.2rem;
  }
}

.search {
  margin-bottom: 0.12rem;
  line-height: 0.32rem; //行高：將會(huì)自動(dòng)撐開
  background: #f5f5f5;
  color: #b7b7b7;
  border-radius: 0.16rem;
  font-size: 0.14rem;
  &__icon {
    display: inline-block;
    padding: 0 0.05rem 0 0.16rem;
    font-size: 0.15rem;
  }
  &__text {
    display: inline-block;
    font-size: 0.14rem;
  }
}
.banner {
  height: 0%;
  overflow: hidden;
  padding-bottom: 25%; //屏幕寬度的25%
  &__img {
    width: 100%;
  }
}
.category_list {
  display: flex; //flex布局:彈性盒
  flex-wrap: wrap; //讓彈性盒元素在必要的時(shí)候拆行
  margin-top: 0.16rem;
  &__item {
    width: 20%;
    &__img {
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin: 0 auto;
    }
    &__desc {
      margin: 0.06rem 0 0.16rem 0;
      text-align: center;
      color: $content-font-color;
    }
  }
}
.gap {
  height: 0.1rem;
  background: $content-bg-color;
  margin: 0 -0.18rem;
}
.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    color: $content-font-color;
    font-weight: normal; //不加粗展示
  }
  &__item {
    display: flex;
    padding-top: 0.12rem;

    // 圖片
    &__img {
      margin-right: 0.16rem;
      width: 0.56rem;
      height: 0.56rem;
    }
    //右側(cè)文字內(nèi)容
    &__content {
      padding-bottom: 0.12rem;
      border-bottom: 1px solid $content-bg-color;
      flex: 1;
      &__title {
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__tags {
        margin-top: 0.08rem;
        line-height: 0.18rem;
        font-size: 0.13rem;
        color: $content-font-color;
      }
      &__tag {
        margin-right: 0.16rem;
      }
      &__highlight {
        color: #e93b3b;
        line-height: 0.18rem;
        font-size: 0.13rem;
        margin: 0.08rem 0 0 0;
      }
    }
  }
}
.docker {
  color: $content-font-color;
  display: flex; //自適應(yīng)均贈(zèng),彈性盒子
  position: absolute; //絕對(duì)定位
  box-sizing: border-box; //這個(gè)會(huì)以body的最外層作為容器的最外層
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid $content-bg-color;
  &__item {
    flex: 1;
    text-align: center;
    &--active {
      color: #1fa4fc;
    }
    &_icon {
      margin: 0.05rem 0 0.02rem 0; //圖標(biāo)距離上邊距7px左右;
      font-size: 0.18rem;
    }
    &__title {
      //瀏覽器最小像素是12px梯浪，如果想表達(dá)12px以下大小得如下編寫
      font-size: 0.12rem;
      transform: scale(0.5 0.5); //橫向縮小50% 縱向搜小50%
      transform-origin: center top; //縮放的中心點(diǎn)
    }
  }
}
</style>

修改router.js：

import {
  createRouter,
  createWebHistory
} from 'vue-router'
// import Home from '../views/Home.vue'

const routes = [{
  path: '/',
  name: ''
}
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

重新運(yùn)行vue項(xiàng)目，仍然可以加載頁(yè)面瓢娜。
將頁(yè)面拆成3個(gè)組件挂洛。
新建src\views\home\StaticPart.vue:

<template>
  <!-- 頂部位置信息叼屠、通知欄 -->
  <div class="position">
    <span>
      <i class="position__icon custom-icon custom-icon-position"></i>
    </span>
    西安交通大學(xué)興慶校區(qū)梧桐苑食堂北側(cè)小院子放臺(tái)階上
    <i class="position__notice custom-icon custom-icon-bell"></i>
  </div>
  <!-- 搜索欄 -->
  <div class="search">
    <span class="search__icon">
      <i class="custom-icon custom-icon-search"></i>
    </span>
    <span class="search__text"> 黃燜雞米飯</span>
  </div>
  <!-- 橫幅廣告推廣欄 -->
  <div class="banner">
    <img class="banner__img" src="/i18n/9_16/img/banner.jpg" />
  </div>
  <!-- 分類列表欄 -->
  <div class="category_list">
    <!-- 10個(gè) -->
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/超市.png"
      />
      <p class="category_list__item__desc">超市便利</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/菜市場(chǎng).png"
      />
      <p class="category_list__item__desc">菜市場(chǎng)</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/水果店.png"
      />
      <p class="category_list__item__desc">水果店</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/鮮花.png"
      />
      <p class="category_list__item__desc">鮮花綠植</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/醫(yī)藥健康.png"
      />
      <p class="category_list__item__desc">醫(yī)藥健康</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/家居.png"
      />
      <p class="category_list__item__desc">家居時(shí)尚</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/蛋糕.png"
      />
      <p class="category_list__item__desc">烘焙蛋糕</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/簽到.png"
      />
      <p class="category_list__item__desc">簽到</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/大牌免運(yùn).png"
      />
      <p class="category_list__item__desc">大牌免運(yùn)</p>
    </div>
    <div class="category_list__item">
      <img
        class="category_list__item__img"
        src="/i18n/9_16/img/category_list/紅包.png"
      />
      <p class="category_list__item__desc">紅包套餐</p>
    </div>
  </div>
  <!-- 灰色留白分隔欄 -->
  <div class="gap"></div>
</template>

<script>
export default {
  name: 'StaticPart'
}
</script>

<style lang="scss" scope>
@import '@/style/viriables';
@import '@/style/mixins';
.position {
  //文字顯示省略號(hào)配置
  @include ellipsis;
  // 其他一般設(shè)定
  position: relative;
  padding: 0.16rem 0.24rem 0.16rem 0;
  line-height: 0.22rem;
  font-size: 0.16rem;
  color: $content-font-color;
  .position__icon {
    position: relative;
    top: 0.01rem;
    font-size: 0.2rem;
    margin-right: 0.08rem;
  }
  .position__notice {
    top: 0.17rem;
    right: 0;
    position: absolute;
    font-size: 0.2rem;
  }
}

.search {
  margin-bottom: 0.12rem;
  line-height: 0.32rem; //行高：將會(huì)自動(dòng)撐開
  background: #f5f5f5;
  color: #b7b7b7;
  border-radius: 0.16rem;
  font-size: 0.14rem;
  &__icon {
    display: inline-block;
    padding: 0 0.05rem 0 0.16rem;
    font-size: 0.15rem;
  }
  &__text {
    display: inline-block;
    font-size: 0.14rem;
  }
}
.banner {
  height: 0%;
  overflow: hidden;
  padding-bottom: 25%; //屏幕寬度的25%
  &__img {
    width: 100%;
  }
}
.category_list {
  display: flex; //flex布局:彈性盒
  flex-wrap: wrap; //讓彈性盒元素在必要的時(shí)候拆行
  margin-top: 0.16rem;
  &__item {
    width: 20%;
    &__img {
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin: 0 auto;
    }
    &__desc {
      margin: 0.06rem 0 0.16rem 0;
      text-align: center;
      color: $content-font-color;
    }
  }
}
.gap {
  height: 0.1rem;
  background: $content-bg-color;
  margin: 0 -0.18rem;
}
</style>

新建src\views\home\Nearby.vue:

<template>
  <!-- 主體商鋪展示內(nèi)容 -->
  <div class="nearby">
    <h3 class="nearby__title">附近店鋪</h3>
    <!-- 5個(gè) -->
    <div class="nearby__item">
      <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
      <div class="nearby__item__content">
        <div class="nearby__item__content__title">某爾瑪</div>
        <div class="nearby__item__content__tags">
          <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
          <span class="nearby__item__content__tag">起送￥0</span>
          <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
        </div>
        <p class="nearby__item__content__highlight">
          VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
        </p>
      </div>
    </div>
    <div class="nearby__item">
      <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
      <div class="nearby__item__content">
        <div class="nearby__item__content__title">某爾瑪</div>
        <div class="nearby__item__content__tags">
          <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
          <span class="nearby__item__content__tag">起送￥0</span>
          <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
        </div>
        <p class="nearby__item__content__highlight">
          VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
        </p>
      </div>
    </div>
    <div class="nearby__item">
      <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
      <div class="nearby__item__content">
        <div class="nearby__item__content__title">某爾瑪</div>
        <div class="nearby__item__content__tags">
          <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
          <span class="nearby__item__content__tag">起送￥0</span>
          <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
        </div>
        <p class="nearby__item__content__highlight">
          VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
        </p>
      </div>
    </div>
    <div class="nearby__item">
      <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
      <div class="nearby__item__content">
        <div class="nearby__item__content__title">某爾瑪</div>
        <div class="nearby__item__content__tags">
          <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
          <span class="nearby__item__content__tag">起送￥0</span>
          <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
        </div>
        <p class="nearby__item__content__highlight">
          VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
        </p>
      </div>
    </div>
    <div class="nearby__item">
      <img src="/i18n/9_16/img/near.png" class="nearby__item__img" />
      <div class="nearby__item__content">
        <div class="nearby__item__content__title">某爾瑪</div>
        <div class="nearby__item__content__tags">
          <span class="nearby__item__content__tag">月售1萬(wàn)+</span>
          <span class="nearby__item__content__tag">起送￥0</span>
          <span class="nearby__item__content__tag">基礎(chǔ)運(yùn)費(fèi)￥5</span>
        </div>
        <p class="nearby__item__content__highlight">
          VIP尊享89元減4元運(yùn)費(fèi)券(每月3張)
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default { name: 'Nearby' }
</script>

<style lang="scss" scope>
@import '@/style/viriables';
@import '@/style/mixins';
.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    color: $content-font-color;
    font-weight: normal; //不加粗展示
  }
  &__item {
    display: flex;
    padding-top: 0.12rem;

    // 圖片
    &__img {
      margin-right: 0.16rem;
      width: 0.56rem;
      height: 0.56rem;
    }
    //右側(cè)文字內(nèi)容
    &__content {
      padding-bottom: 0.12rem;
      border-bottom: 1px solid $content-bg-color;
      flex: 1;
      &__title {
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__tags {
        margin-top: 0.08rem;
        line-height: 0.18rem;
        font-size: 0.13rem;
        color: $content-font-color;
      }
      &__tag {
        margin-right: 0.16rem;
      }
      &__highlight {
        color: #e93b3b;
        line-height: 0.18rem;
        font-size: 0.13rem;
        margin: 0.08rem 0 0 0;
      }
    }
  }
}
</style>

新建src\views\home\Docker.vue:

<template>
  <!-- 底部主菜單容器 -->
  <div class="docker">
    <span class="docker__item docker__item--active">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-home"></i>
      </div>
      <div class="docker__item__title">首頁(yè)</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-shopping"></i>
      </div>
      <div class="docker__item__title">購(gòu)物車</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-order"></i>
      </div>
      <div class="docker__item__title">訂單</div>
    </span>
    <span class="docker__item ">
      <div class="docker__item_icon">
        <i class="custom-icon custom-icon-my"></i>
      </div>
      <div class="docker__item__title">我的</div>
    </span>
  </div>
</template>

<script>
export default {
  name: 'Docker'
}
</script>

<style lang="scss" scope>
@import '@/style/viriables';
@import '@/style/mixins';
.docker {
  color: $content-font-color;
  display: flex; //自適應(yīng)均贈(zèng),彈性盒子
  position: absolute; //絕對(duì)定位
  box-sizing: border-box; //這個(gè)會(huì)以body的最外層作為容器的最外層
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid $content-bg-color;
  &__item {
    flex: 1;
    text-align: center;
    &--active {
      color: #1fa4fc;
    }
    &_icon {
      margin: 0.05rem 0 0.02rem 0; //圖標(biāo)距離上邊距7px左右;
      font-size: 0.18rem;
    }
    &__title {
      //瀏覽器最小像素是12px驼抹，如果想表達(dá)12px以下大小得如下編寫
      font-size: 0.12rem;
      transform: scale(0.5 0.5); //橫向縮小50% 縱向搜小50%
      transform-origin: center top; //縮放的中心點(diǎn)
    }
  }
}
</style>

調(diào)整src\views\home\Home.vue:

<template>
  <!-- 主體內(nèi)容容器 -->
  <div class="wrapper">
    <StaticPart />
    <!-- 主體商鋪展示內(nèi)容 -->
    <Nearby />
  </div>
    <!-- 底部主菜單容器 -->
    <Docker/>
  <router-view />
</template>

<script>
import StaticPart from '@/views/home/StaticPart'
import Nearby from '@/views/home/Nearby'
import Docker from '@/views/home/Docker'
export default {
  name: 'Home',
  components: { StaticPart, Nearby, Docker }
}
</script>

<style lang="scss">
.wrapper {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  padding: 0 0.18rem 0.1rem 0.18rem;
}
</style>

最后編輯于：2021.10.23 21:09:51

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末感憾，一起剝皮案震驚了整個(gè)濱河市史辙，隨后出現(xiàn)的幾起案子各淀，更是在濱河造成了極大的恐慌瞳秽，老刑警劉巖胯杭，帶你破解...
沈念sama閱讀 219,188評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件船响，死亡現(xiàn)場(chǎng)離奇詭異哈肖，居然都是意外死亡吻育，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,464評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門淤井，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)布疼，“玉大人，你說(shuō)我怎么就攤上這事币狠∮瘟剑” “怎么了？”我有些...
開封第一講書人閱讀 165,562評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵漩绵，是天一觀的道長(zhǎng)贱案。經(jīng)常有香客問(wèn)我，道長(zhǎng)止吐，這世上最難降的妖魔是什么宝踪？我笑而不...
開封第一講書人閱讀 58,893評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮碍扔，結(jié)果婚禮上瘩燥，老公的妹妹穿的比我還像新娘。我一直安慰自己不同，他們只是感情好厉膀，可當(dāng)我...
茶點(diǎn)故事閱讀 67,917評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布溶耘。她就那樣靜靜地躺著，像睡著了一般服鹅。火紅的嫁衣襯著肌膚如雪凳兵。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,708評(píng)論 1贊 305
城市分裂傳說(shuō)
那天菱魔，我揣著相機(jī)與錄音留荔，去河邊找鬼。笑死澜倦，一個(gè)胖子當(dāng)著我的面吹牛聚蝶，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播藻治，決...
沈念sama閱讀 40,430評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼碘勉，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了桩卵？” 一聲冷哼從身側(cè)響起验靡，我...
開封第一講書人閱讀 39,342評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎雏节，沒想到半個(gè)月后胜嗓，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,801評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡钩乍，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,976評(píng)論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年辞州，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寥粹。...
茶點(diǎn)故事閱讀 40,115評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡变过，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出涝涤，到底是詐尸還是另有隱情媚狰，我是刑警寧澤，帶...
沈念sama閱讀 35,804評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布阔拳，位于F島的核電站崭孤，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏糊肠。R本人自食惡果不足惜辨宠，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,458評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望罪针。院中可真熱鬧，春花似錦黄伊、人聲如沸泪酱。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,008評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)墓阀。三九已至毡惜，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間斯撮，已是汗流浹背经伙。一陣腳步聲響...
開封第一講書人閱讀 33,135評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留勿锅，地道東北人帕膜。一個(gè)月前我還...
沈念sama閱讀 48,365評(píng)論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像溢十，于是被迫代替她去往敵國(guó)和親垮刹。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,055評(píng)論 2贊 355

【vue3.0】5.0 某東到家（五）——首頁(yè)收尾以及組件合理拆分

組件的合理拆分

推薦閱讀更多精彩內(nèi)容