TODO.md

@@ -3,17 +3,24 @@
 > 复用性高的页面
 
 - [ ] 登录组件
-  * 手机登录
-  * 密码登录
-  * 微信扫码登录
-    * 微信扫码需要绑定手机号
-  * 注册账号
+  - 手机登录
+  - 密码登录
+  - 微信扫码登录
+    - 微信扫码需要绑定手机号
+  - 注册账号
 - [ ] 排行榜组件
-  * 积分排行
-  * 点赞排行
-  * 精华贴排行
+  - 积分排行
+  - 点赞排行
+  - 精华贴排行
 - [ ] 开通会员组件
-  * 微信/支付宝支付
+  - 微信/支付宝支付
 - [ ] 全部话题选择组件
 - [ ] 添加客服微信组件
 
+## Question
+
+- [ ] 首页的排行榜 点击更多跳转哪里？
+
+## 缺少
+
+- [ ] 开通 VIP 组件头部缺少 水印 VIP

src/assets/icons/collect.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1701756840610" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2048" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M284.458667 941.397333c-36.437333 15.637333-68.48-7.68-64.896-47.168l22.613333-248.917333-164.394667-188.053333c-26.069333-29.824-13.653333-67.562667 24.789334-76.309334l243.370666-55.381333 127.786667-214.677333c20.288-34.090667 59.946667-34.069333 80.213333 0l127.786667 214.677333 243.370667 55.381333c38.656 8.789333 50.858667 46.485333 24.789333 76.309334l-164.394667 188.053333 22.741334 249.002667c3.605333 39.509333-28.458667 62.805333-64.896 47.146666l-229.504-98.517333-229.376 98.453333z" fill="" p-id="2049"></path></svg>

src/assets/icons/forward.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1701756831219" class="icon" viewBox="0 0 1252 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1760" xmlns:xlink="http://www.w3.org/1999/xlink" width="244.53125" height="200"><path d="M789.325694 62.559305h0.28436-0.28436M773.970228 0c-28.436048 0-56.872096 22.748838-56.872096 69.952678V250.237222l-32.132734 1.706162a682.46515 682.46515 0 0 0-398.104671 142.18024C142.689964 511.848862 27.239609 708.626314 0.509724 961.991501A54.881572 54.881572 0 0 0 46.860483 1023.697725a22.748838 22.748838 0 0 0 7.393372 0 48.056921 48.056921 0 0 0 43.507153-25.308083C236.244562 799.337307 532.26382 767.773294 677.572025 767.773294h39.810467v193.080765A59.715701 59.715701 0 0 0 776.529472 1023.697725a65.11855 65.11855 0 0 0 46.350758-20.758315l389.858217-412.038334c50.047444-52.037968 52.606689-106.066459 2.559244-158.104427L815.202497 17.91471A56.872096 56.872096 0 0 0 773.970228 0z" p-id="1761"></path></svg>

src/assets/icons/like.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1701756837207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1906" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M773.6 912.7h-1.2c-37.2-0.4-74.5-0.4-111.8-0.4h-56.9c-38 0-76 0-114.1-0.5-21.1-0.6-41.9-5-61.5-13-33.3-13-52.3-42-52.2-79.7l0.1-141.4c0-78.3 0-156.7 0.7-235 0.1-21.3 13.8-41.3 25.5-51.8 45.3-41.4 94.5-93 115.1-162.6 5.7-19.4 7.9-40.8 10.2-63.4 4.6-45 33.8-74.3 72.8-74.3 15.3 0 30.6 4.6 45.6 13.5 30.1 18.1 50.2 46.5 61.3 87 17.8 64.3 8.7 126.7-1.3 180.2v0.2c-2.3 12.5 7.1 24.1 19.9 24.1h130c22.4 0 54.5 2.8 74.3 26.8 14.4 17.5 18.5 41.1 12.4 72.3-18.6 95.9-41.4 192.6-63.2 282.7-6.8 28.1-18.1 54.1-29 79.3l-4.7 10.8c-12.4 29.2-38 45.2-72 45.2zM216.1 903.3h-11.9c-43 0-78.2-35.2-78.2-78.2V476.6c0-43 35.2-78.2 78.2-78.2h11.9c43 0 78.2 35.2 78.2 78.2V825c0.1 43.1-35.1 78.3-78.2 78.3z" fill="" p-id="1907"></path></svg>

src/assets/icons/message.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1701756843945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2190" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M509.8 98.2c-220.2 0-398.7 156.2-398.7 348.9 0 110.1 58.5 208.2 149.5 272.1v176.5l174.7-106c24.2 4 49 6.3 74.5 6.3 220.2 0 398.7-156.2 398.7-348.9 0.1-192.7-178.4-348.9-398.7-348.9z" fill="" p-id="2191"></path></svg>

src/assets/icons/scan.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1701850693597" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="663" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M128 669.866667v154.133333a72 72 0 0 0 67.776 71.893333l4.224 0.106667H354.133333c4.693333 0 8.533333 3.84 8.533334 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533334 8.533333H205.482667A141.482667 141.482667 0 0 1 64 818.517333V669.866667c0-4.693333 3.84-8.533333 8.533333-8.533334h46.933334c4.693333 0 8.533333 3.84 8.533333 8.533334z m832 0v148.650666A141.482667 141.482667 0 0 1 818.517333 960H669.866667a8.533333 8.533333 0 0 1-8.533334-8.533333v-46.933334c0-4.693333 3.84-8.533333 8.533334-8.533333h154.133333a72 72 0 0 0 71.893333-67.776l0.106667-4.224V669.866667c0-4.693333 3.84-8.533333 8.533333-8.533334h46.933334c4.693333 0 8.533333 3.84 8.533333 8.533334z m0-170.666667v46.933333a8.533333 8.533333 0 0 1-8.533333 8.533334H72.533333a8.533333 8.533333 0 0 1-8.533333-8.533334v-46.933333c0-4.693333 3.84-8.533333 8.533333-8.533333h878.933334c4.693333 0 8.533333 3.84 8.533333 8.533333z m-597.333333-426.666667v46.933334a8.533333 8.533333 0 0 1-8.533334 8.533333H200a72 72 0 0 0-71.893333 67.776L128 200V354.133333a8.533333 8.533333 0 0 1-8.533333 8.533334H72.533333a8.533333 8.533333 0 0 1-8.533333-8.533334V205.482667A141.482667 141.482667 0 0 1 205.482667 64H354.133333c4.693333 0 8.533333 3.84 8.533334 8.533333zM818.517333 64A141.482667 141.482667 0 0 1 960 205.482667V354.133333a8.533333 8.533333 0 0 1-8.533333 8.533334h-46.933334a8.533333 8.533333 0 0 1-8.533333-8.533334V200a72 72 0 0 0-67.776-71.893333L824 128H669.866667a8.533333 8.533333 0 0 1-8.533334-8.533333V72.533333c0-4.693333 3.84-8.533333 8.533334-8.533333h148.650666z" fill="" p-id="664"></path></svg>

src/components/ActivateMembership/index.vue

@@ -0,0 +1,338 @@
+<script setup name="ActivateMembership">
+import { ref } from 'vue';
+import { Close } from '@element-plus/icons-vue';
+import SvgIcon from '~/components/SvgIcon/index.vue';
+
+const visibleDialog = ref(false)
+
+const visiblePay = ref(false)
+
+// NOTE: 事件
+
+</script>
+
+<template>
+  <div class="activate-membership-container">
+    <el-dialog class="dialog-primary" v-model="visibleDialog" :show-close="false" width="30%">
+      <!-- :before-close="handleClose" -->
+      <template #header="{ close, titleId, titleClass }">
+        <div class="headerbox flex-row flex-aic flex-jc-sb">
+          <div class="infobox flex-row flex-aic">
+            <!-- NOTE: 只有登录才展示用户头像 -->
+            <img src="https://dummyimage.com/50x50/e3e3e3/fff" />
+            <div class="info">
+              <template v-if="true">
+                <div class="infobox__title">注册/登录</div>
+                <div class="infobox__description">请登录后再购买</div>
+              </template>
+            </div>
+          </div>
+          <div class="close">
+            <el-icon @click="close" :size="30" color="#ffffff" class="no-inherit">
+              <Close />
+            </el-icon>
+          </div>
+        </div>
+      </template>
+      <div class="dialog-container flex-row flex-jc-sb">
+        <div class="left">
+          <div class="title">
+            开通权益
+          </div>
+          <ul>
+            <li>购买额外赠送18888积分</li>
+            <li>额外免费2次拍摄</li>
+            <li>升级领福利</li>
+            <li>积分商城折扣</li>
+          </ul>
+        </div>
+        <div class="right">
+          <div class="right__title">购买时长</div>
+          <div class="items flex-row flex-jc-sb">
+            <div class="item active flex-col flex-aic flex-jc-sb">
+              <div class="item__title">会员半年卡</div>
+              <div class="item__money">
+                <span>￥</span>
+                <span>125</span>
+              </div>
+              <div class="item__origin-money">￥158</div>
+            </div>
+            <div class="item  flex-col flex-aic flex-jc-sb">
+              <div class="item__title">会员半年卡</div>
+              <div class="item__money">
+                <span>￥</span>
+                <span>125</span>
+              </div>
+              <div class="item__origin-money">￥158</div>
+            </div>
+          </div>
+          <div class="paym-tit">支付方式</div>
+          <div class="paymethods flex-row">
+            <div class="active">微信支付</div>
+            <div>支付宝支付</div>
+          </div>
+          <el-button type="primary">
+            去付款
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+
+    <!-- Pay dialog -->
+    <el-dialog v-model="visiblePay" title="支付宝支付" width="20%">
+      <div class="paybox flex-col flex-aic">
+        <div class="paybox__title">
+          支付金额 <span>￥</span><span>500</span>
+        </div>
+        <div class="paybox__countdown">支付剩余时间：14:45</div>
+        <div class="paybox__qrcode">
+          <img src="https://dummyimage.com/140x140/e3e3e3/fff?text=qrcode" />
+        </div>
+        <div class="paybox__foot flex-row flex-aic">
+          <SvgIcon name="scan" :size="30" color="rgba(152, 152, 152, 1)" />
+          <div class="flex-col">
+            <span>打开手机支付宝</span>
+            <span>扫一扫二维码</span>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "~/styles/variable.scss";
+
+.activate-membership-container {
+  width: auto;
+
+
+  .dialog-primary {
+
+    &:deep(.el-dialog) {
+      --el-dialog-border-radius: 12px;
+      overflow: hidden;
+
+    }
+
+    :deep(.el-dialog__header) {
+      padding: 0;
+      margin: 0;
+    }
+
+    :deep(.el-dialog__body) {
+      background-color: rgba(249, 249, 249, 1),
+    }
+  }
+
+  .headerbox {
+    padding: 20px 22px 10px;
+    background-color: $color-primary;
+
+    .infobox {
+      width: 0;
+      flex: 1;
+      color: #FFFFFF;
+
+      img {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        vertical-align: middle;
+      }
+
+      .info {
+        padding-left: 10px;
+      }
+
+      &__title {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 22px;
+      }
+
+      &__description {
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 18px;
+      }
+    }
+
+    .close {
+      cursor: pointer;
+    }
+  }
+
+  .dialog-container {
+    column-gap: 12px;
+
+
+
+    .left,
+    .right {
+      padding: 16px;
+      background-color: #ffffff;
+    }
+
+    .left {
+      .title {
+        font-size: 14px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #222222;
+        line-height: 30px;
+      }
+
+      ul {
+        margin-block-start: 0;
+        padding-inline-start: 15px;
+      }
+
+      li {
+        font-size: 12px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        color: #444444;
+        line-height: 28px;
+
+        &::marker {
+          color: #444444;
+        }
+      }
+    }
+
+    .right {
+      width: 0;
+      flex: 1;
+
+      &__title {
+        font-size: 14px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #222222;
+        line-height: 3em;
+      }
+
+      .items {
+        column-gap: 20px;
+
+        .item {
+          user-select: none;
+          width: 0;
+          flex: 1;
+          padding: 18px;
+          border-radius: 10px;
+
+          background: #F6F6F6;
+
+          &.active {
+            border: 2px solid #57C3C2;
+          }
+
+          &__title {
+            font-size: 18px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 500;
+            color: #444444;
+            line-height: 25px;
+          }
+
+          &__money {
+            padding: 30px 0;
+            font-size: 22px;
+            font-family: JDZhengHT, JDZhengHT;
+            font-weight: 400;
+            color: #333333;
+            line-height: 22px;
+
+            span {
+              &:first-child {
+                font-size: 16px;
+              }
+
+              &:last-child {
+                font-size: 48px;
+                font-weight: 600;
+              }
+            }
+          }
+
+          &__origin-money {
+            font-size: 16px;
+            font-weight: 400;
+            color: #666666;
+            line-height: 19px;
+            text-decoration: line-through;
+          }
+        }
+      }
+
+      .paym-tit {
+        font-size: 16px;
+        font-weight: 500;
+        color: #222222;
+        line-height: 3em;
+      }
+
+      .paymethods {
+        column-gap: 20px;
+        margin-bottom: 20px;
+
+        div {
+          width: 112px;
+          height: 36px;
+          text-align: center;
+          line-height: 36px;
+          border: 1px solid #BCBCBC;
+          font-size: 14px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          color: #444444;
+          border-radius: 3px;
+
+          &.active {
+            border: 1px solid $color-primary;
+          }
+
+        }
+      }
+    }
+  }
+
+  .paybox {
+    &__title {
+      font-size: 20px;
+      font-weight: 400;
+      color: #000000;
+
+      span {
+        color: $color-primary;
+
+        &:first-child {}
+
+        &:last-child {
+          font-size: 36px;
+        }
+      }
+    }
+
+    &__countdown {
+      padding: 8px 0 14px;
+    }
+
+    .qrcode {
+      width: 140px;
+      height: 140px;
+    }
+
+    &__foot {
+      padding-top: 10px;
+
+      div {
+        padding-left: 10px;
+      }
+    }
+  }
+}
+</style>

src/components/IndexNews/index.vue

@@ -0,0 +1,67 @@
+<script setup name="IndexNews">
+
+const a = 1
+
+</script>
+
+<template>
+  <div class="index-news-container">
+    <div class="imgbox">
+      <img src="https://dummyimage.com/279x155/e3e3e3/fff" alt="">
+    </div>
+    <div class="content">
+      <div class="title ellipsis-two">
+        含《极乐迪斯科 最终剪辑版》及《哥谭骑士》：索尼公布10月PS+含《极乐迪斯科 最终剪辑版》及《哥谭骑士》：索尼公布10月PS+
+      </div>
+      <div class="footer flex-row flex-aic flex-jc-sb">
+        <span>54分钟前</span>
+        <div><span>324喜欢</span>·<span>5233评论</span></div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.index-news {
+  &-container {
+    background-color: #fff;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .imgbox {
+      width: 279px;
+      height: 155px;
+      background: #eee;
+      border-radius: 6px 6px 0px 0px;
+    }
+
+    .content {
+      padding: 16px 10px;
+
+      .title {
+        width: calc(279px - 20px);
+        height: 44px;
+        font-size: 16px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 22px;
+        margin-bottom: 16px;
+      }
+
+      .footer {
+        height: 20px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #777777;
+        line-height: 15px;
+
+        div {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/IndexSection/index.vue

@@ -0,0 +1,179 @@
+<script setup name="IndexSection">
+
+import SvgIcon from '~/components/SvgIcon/index.vue'
+
+const Props = defineProps({
+  type: {
+    type: String,
+    validator: key => (['article', 'common'].includes(key)),
+    default: 'common'
+  }
+})
+
+</script>
+
+<template>
+  <div class="index-section-container">
+    <div v-if="type === 'common'" class="imgbox">
+      <img src="https://dummyimage.com/279x155/e3e3e3/fff" alt="" />
+    </div>
+    <div v-else class="article-wrapper">
+      <div class="title ellipsis-two">
+        {{ type }}VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄
+      </div>
+      <p class="desc">
+        互动式影视作品《寂静岭：升天》(Silent Hill: Ascension)  今日放出了新的宣传预告，并宣布将于11月1日登陆 App Store、Google Play 和官方网页平台。《寂静岭：升天》是寂静岭系列衍生的互动影视作品，玩家们的选择则会决定主角们的命运。 
+      </p>
+    </div>
+
+    <div class="content">
+      <div v-if="type === 'common'" class="title ellipsis-two">
+        {{ type }}VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄VR全景拍摄
+      </div>
+      <div class="flag">
+        #话题名称
+      </div>
+
+      <div class="moment-user flex-row flex-aic flex-jc-sb">
+        <div class="left flex-row flex-aic">
+          <div class="avatar">
+            <img src="https://dummyimage.com/20x20/e3e3e3/fff" alt="" />
+          </div>
+          <div class="nickname ellipsis">上海xxxxx公司</div>
+        </div>
+        <div class="ago">1个小时前</div>
+      </div>
+
+      <div class="footer">
+        <ul class="flex-row flex-aic flex-jc-sb">
+          <li class="active">
+            <SvgIcon name="like" :size="16" :rgap="2" color="#00b0b0" />
+            <span>22.3W</span>
+          </li>
+          <li class="active">
+            <SvgIcon name="collect" :size="16" :rgap="2" color="#00b0b0" />
+            <span>98698</span>
+          </li>
+          <li>
+            <SvgIcon name="message" :size="16" :rgap="2" color="#999999" />
+            <span>2354</span>
+          </li>
+          <li>
+            <SvgIcon name="forward" :size="16" :rgap="2" color="#999999" />
+            <span>40W</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.index-section {
+  &-container {
+    width: 279px;
+    height: 337px;
+    background-color: #fff;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .imgbox {
+      width: 279px;
+      height: 155px;
+      background: #eee;
+      border-radius: 6px 6px 0px 0px;
+    }
+
+    .article-wrapper {
+      padding: 14px 10px 0;
+      height: 201px;
+      /* height: 187px; */
+      .title {
+        margin-bottom: 16px;
+      }
+      .desc {
+        margin: 0;
+        padding: 0;
+        font-size: 14px;
+        height: calc(100% - 60px);
+        line-height: 1.44;
+        overflow: hidden;
+      }
+    }
+    
+    .title {
+      width: calc(279px - 20px);
+      height: 44px;
+      font-size: 16px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+      line-height: 22px;
+      margin-bottom: 16px;
+    }
+
+    .content {
+      padding: 16px 10px;
+
+      .flag {
+        height: 30px;
+        line-height: 30px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #FF6700;
+      }
+
+      .moment-user {
+        height: 30px;
+        .left {
+          width: 0;
+          flex: 1;
+        }
+        .avatar {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          overflow: hidden;
+        }
+        .nickname {
+          flex: 1;
+          padding:0 10px 0 8px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #444444;
+        }
+        .ago {
+          height: 17px;
+          font-size: 12px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          color: #888888;
+          line-height: 17px;
+        }
+      }
+      .footer {
+        height: 30px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 30px;
+        ul {
+          padding: 0;
+          margin: 0;
+          list-style: none;
+          li {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &.active {
+              color: #00b0b0;
+            }
+          }
+        }
+      }
+    }
+
+  }
+}
+</style>

src/components/IndexTitle/index.vue

@@ -28,7 +28,7 @@ const Emits = defineEmits(['seeMore'])
 @import "~/styles/variable.scss";
 
 .index-title-container {
-  padding-left: 18px;
+  padding-left: 16px;
   border-left: 4px solid $color-primary;
 
   .title {

src/components/SvgIcon/index.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup name="SvgIcon">
 import { computed } from 'vue'
 
 const Props = defineProps({

src/components/TheCharts/Item.vue

@@ -0,0 +1,194 @@
+<script setup name="TheChartItem">
+import { computed, h } from "vue";
+import { getPicUrl } from "~/utils/util";
+
+const Props = defineProps({
+  nickname: {
+    type: String,
+  },
+  signature: {
+    type: String
+  },
+  idx: {
+    type: Number
+  },
+  type: {
+    type: String,
+    validator: key => (['score', 'essence', 'like'].includes(key)),
+    required: true
+  }
+})
+
+const __score_comp__ = () => {
+  return h("img", {
+    class: ['score-top'],
+    src: getPicUrl(`../../assets/cicons/score-${Props.idx}.png`, import.meta.url)
+  })
+}
+
+const __common_comp__ = (ops) => {
+  const level = [undefined, 'Ⅰ', 'Ⅱ', 'Ⅲ'][Props.idx]
+  return h("div", {
+    class: [`${ops.className}-top`, `c${Props.idx}`]
+  }, [
+    h("img", {
+      src: getPicUrl(ops.pic, import.meta.url)
+    }),
+    h("span", `${ops.title} ${level}`)
+  ])
+}
+
+// 三种类型
+// 积分排行、精华帖排行、点赞排行
+// 前三有个人 flag
+// 渲染Item `right component`组件
+const rendeTop = computed(() => {
+  switch (Props.type) {
+    case 'score':
+      return __score_comp__()
+    case 'essence':
+      return __common_comp__({
+        pic: '../../assets/cicons/essence.png',
+        className: 'essence',
+        title: '优质作者'
+      })
+    case 'like':
+      return __common_comp__({
+        pic: '../../assets/cicons/like.png',
+        className: 'like',
+        title: '点赞大师'
+      })
+  }
+})
+</script>
+<template>
+  <div class="the-charts-item-container flex-row flex-aic flex-jc-sb">
+    <div class="main flex-row flex-aic">
+      <img src="https://dummyimage.com/38x38/e3e3e3/fff" alt="" class="avatar">
+      <div class="info">
+        <div class="nickname">{{ nickname }}</div>
+        <div class="signature">{{ signature }}</div>
+      </div>
+    </div>
+    <div class="foote">
+      <template v-if="idx <= 3">
+        <component :is="rendeTop"></component>
+      </template>
+      <template v-else>
+        <span :class="`${type}-default`">{{ idx }}</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.the-charts-item-container {
+  padding: 20px 0;
+  border-bottom: 1px solid #F5F5F5;
+
+  &:last-child {
+    border-bottom: initial;
+  }
+
+  .main {
+    .avatar {
+      border-radius: 50%;
+    }
+
+    .info {
+      padding-left: 8px;
+
+      .nickname {
+        width: 98px;
+        height: 20px;
+        font-size: 14px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+      }
+
+      .signature {
+        width: 192px;
+        height: 17px;
+        font-size: 12px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        color: #999999;
+        line-height: 17px;
+      }
+    }
+  }
+
+  .foote {
+    >span {
+      display: inline-block;
+    }
+
+    .score {
+      &-top {
+        width: 30px;
+        height: 19px;
+      }
+
+      &-default {
+        width: 30px;
+        text-align: center;
+        font-size: 16px;
+        font-family: SFPro, SFPro;
+        font-weight: 500;
+        color: #666666;
+      }
+    }
+
+    .essence,
+    .like {
+      &-top {
+        width: 90px;
+        height: 26px;
+        line-height: 26px;
+        background-color: #eee;
+        border-radius: 50px;
+        text-align: center;
+
+        &.c {
+          &1 {
+            background-color: rgba(255, 171, 26, 1);
+          }
+
+          &2 {
+            background-color: rgba(134, 192, 255, 1);
+          }
+
+          &3 {
+            background-color: rgba(252, 184, 145, 1);
+          }
+        }
+
+        img {
+          width: 16px;
+          height: 16px;
+          vertical-align: middle;
+        }
+
+        span {
+          margin-left: 3px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+    }
+
+    .essence-default,
+    .like-default {
+      height: 19px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #666666;
+      line-height: 19px;
+    }
+  }
+
+}
+</style>

src/components/TheCharts/index.vue

@@ -0,0 +1,88 @@
+<script setup name="TheCharts">
+import TheChartItem from "./Item.vue"
+
+const Props = defineProps({
+  headerTitle: {
+    type: String,
+    default: ''
+  },
+  list: {
+    type: Array,
+    default: () => ([])
+  },
+  type: {
+    type: String,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <div class="the-charts-container">
+    <header class="heade">
+      <span>{{ headerTitle }}</span>
+    </header>
+    <div class="main">
+      <template v-for="(item, idx) in list" :key="idx">
+        <TheChartItem :idx="++idx" :type="type" :nickname="item.nickname" :signature="item.signature" />
+      </template>
+    </div>
+    <div class="footer">
+      <span>查看更多</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "~/styles/variable.scss";
+
+.the-charts-container {
+  width: 100%;
+  background-color: #fff;
+  padding: 16px;
+
+  header.heade {
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    border-bottom: 1px solid #F5F5F5;
+
+    span {
+      position: relative;
+      display: inline-block;
+
+      &::before {
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        content: "";
+        width: 60%;
+        height: 2px;
+        transform: translateX(-50%);
+        background-color: $color-primary;
+
+
+      }
+    }
+  }
+
+  .footer {
+    text-align: center;
+
+    span {
+      cursor: pointer;
+      display: inline-block;
+      width: 50%;
+      padding: 16px 0;
+      text-align: center;
+      background-color: #F7F7F7;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 20px;
+    }
+  }
+}
+</style>

src/components/layouts/Footer.vue

@@ -0,0 +1,162 @@
+<script setup name="YXFooter">
+import { ref } from "vue"
+
+const vals = ref([
+  {
+    label: '营业执照'
+  },
+  {
+    label: '增值电信业务经营许可证 京B2-20191060',
+  },
+  {
+    label: '京ICP备17068232号-1',
+  },
+  {
+    label: '广播电视节目制作经营许可证',
+  },
+  {
+    label: '网络文化经营许可证京网文[2019]1067-097号',
+  },
+  {
+    label: '京公网安备 11010502036937号',
+  },
+  {
+    label: '食品经营许可证 JY11105052461621',
+  },
+  {
+    label: '出版物经营许可证 新出发京零字朝190063号',
+  }
+])
+</script>
+
+<template>
+  <div class="layout-footer-container">
+    <div class="line">
+    </div>
+    <div class="hbox">
+      <img src="https://dummyimage.com/120x70/e3e3e3/fff" alt="">
+    </div>
+    <div class="content flex-row flex-jc-sb">
+      <div class="left">
+        <p>机核从2010年开始一直致力于分享游戏玩家的生活，以及深入探讨游戏相关的文化。我们开发原创的播客以及视频节目，一直在不断寻找民间高质量的内容创作者。</p>
+        <p>我们坚信游戏不止是游戏，游戏中包含的科学，文化，历史等各个层面的知识和故事，它们同时也会辐射到二次元甚至电影的领域，这些内容非常值得分享给热爱游戏的您。</p>
+      </div>
+      <div class="right">
+        <ul>
+          <li v-for="(item, idx) in vals" :key="idx">
+            <a href="#">{{ item.label }}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="footer flex-row flex-jc-sb">
+      <div class="navigation">
+        <ul class="flex-row flex-aic">
+          <li>
+            <a href="#">
+              错误反馈
+            </a>
+          </li>
+          <li>
+            <a href="#">
+
+              用户协议
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              隐私政策
+
+            </a>
+          </li>
+          <li>
+            <a href="#">
+
+              开源软件声明
+            </a>
+          </li>
+          <li>
+            <a href="#">
+
+              个人信息收集清单
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              加入忆象
+
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="copyright">
+        copyright © 2009 - 2023 gamecores. all rights reserved
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout-footer-container {
+  .line {
+    margin-top: 20px;
+    height: 2px;
+    background: #e5e5e5;
+    margin-bottom: 40px;
+  }
+
+  .content {
+    padding-bottom: 20px;
+
+    .left {
+      width: 38%;
+      font-size: 16px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 2;
+    }
+
+    .right {
+      width: 0;
+      flex: 1;
+      line-height: 34px;
+
+      ul {
+        list-style: none;
+
+        li {
+          text-align: right;
+          font-size: 14px;
+          font-family: SFPro, SFPro;
+          font-weight: 400;
+
+          a {
+            text-decoration: none;
+            color: #666666;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    .navigation {
+      ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        column-gap: 14px;
+        font-size: 14px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        line-height: 20px;
+
+        a {
+          color: #444444;
+        }
+      }
+    }
+  }
+
+}
+</style>

src/components/layouts/Header.vue

@@ -2,6 +2,9 @@
 import { ref } from 'vue';
 import { Search, Promotion, Avatar } from '@element-plus/icons-vue'
 import { useUser } from '~/store/user.js'
+import ActivateMembership from '~/components/ActivateMembership/index.vue'
+
+import { getPicUrl } from '~/utils/util'
 
 import SvgIcon from '~/components/SvgIcon/index.vue'
 const user = useUser()
@@ -11,27 +14,30 @@ const keyword = ref('') // Search keyword
 const momentList = ref([
   {
     label: '论坛',
-    icon: '~/assets/cicons/',
+    icon: getPicUrl('../../assets/cicons/send-01.png', import.meta.url),
     type: '', // 类型跳转发布时的type
   },
   {
     label: '文章',
-    icon: '~/assets/cicons/',
+    icon: getPicUrl('../../assets/cicons/send-02.png', import.meta.url),
+
     type: '', // 类型跳转发布时的type
   },
   {
     label: '咨询',
-    icon: '~/assets/cicons/',
+    icon: getPicUrl('../../assets/cicons/send-03.png', import.meta.url),
+
     type: '', // 类型跳转发布时的type
   },
   {
     label: '视频',
-    icon: '~/assets/cicons/',
+    icon: getPicUrl('../../assets/cicons/send-04.png', import.meta.url),
+
     type: '', // 类型跳转发布时的type
   },
   {
     label: '草稿箱',
-    icon: '~/assets/cicons/',
+    icon: getPicUrl('../../assets/cicons/send-05.png', import.meta.url),
     type: '', // 类型跳转发布时的type
   }
 ])
@@ -214,6 +220,7 @@ const handleClickMoment = moment => {
       </div>
     </div>
   </div>
+  <ActivateMembership />
 </template>
 
 <style lang="scss" scoped>
@@ -376,11 +383,21 @@ const handleClickMoment = moment => {
       li {
         user-select: none;
         cursor: pointer;
-        line-height: 33px;
+        padding: 8px 7px;
 
         .icon {
+          width: 22px;
+          height: 22px;
           margin-right: 10px;
         }
+
+        &:nth-child(4) {
+          border-bottom: 1px solid #EAEAEA;
+        }
+
+        &:last-child {
+          padding-bottom: initial;
+        }
       }
     }
   }

src/router/index.js

@@ -15,9 +15,16 @@ const routes = [
         path: '',
         name: "Home",
         meta: {
-          permiss: '1'
         },
-        component: () => import('~/views/index-content.vue')
+        component: () => import('~/views/index/content.vue')
+      },
+      {
+        path: 'follow',
+        name: "Follow",
+        meta: {
+          title: '我的关注'
+        },
+        component: () => import('~/views/index/follow.vue')
       }
     ]
   }

src/styles/index.scss

@@ -5,12 +5,39 @@ body {
   background-color: rgba(247, 247, 247, 1);
 }
 
+img {
+  vertical-align: middle;
+}
+
 .layout {
   &-container {
     padding: 16px 24px !important;
   }
 }
 
+
+@mixin ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ellipsis {
+  @include ellipsis();
+
+  &-two {
+    display: -webkit-box;
+    @include ellipsis();
+    white-space: wrap;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    box-orient: vertical;
+    line-clamp: 2;
+    line-height: 1.2;
+    overflow: hidden;
+  }
+}
+
 .flex {
   &-row {
     display: flex;

src/styles/variable.scss

@@ -1,3 +1,3 @@
-$color-primary: rgba(0, 176, 176, 1);
+$color-primary: #00b0b0;
 
 $orange: rgba(255, 123, 21, 1);

src/utils/formatTime.js

@@ -0,0 +1,3 @@
+/**
+ * @description 处理时间
+ */

src/utils/util.js

@@ -0,0 +1,15 @@
+/**
+ * 基础 `utils`
+ */
+
+
+/**
+ * 获取图片Url
+ * @param {string} link 资源地址
+ * @returns 图片绝对地址Object
+ */
+export const getPicUrl = (link, baseHref) => {
+  let img = new URL(link, baseHref || import.meta.url)
+  // let img = new URL("../../assets/cicons/score-1.png", import.meta.url)
+  return img.href
+}

src/views/index-content.vue

@@ -1,49 +0,0 @@
-<script setup>
-import IndexTitle from "~/components/IndexTitle/index.vue";
-
-</script>
-
-
-<template>
-  <div class="index-container">
-    <div class="banner">
-      <el-carousel height="420px">
-        <el-carousel-item v-for="item in 4" :key="item">
-          <h3 class="small justify-center" text="2xl">{{ item }}</h3>
-        </el-carousel-item>
-      </el-carousel>
-    </div>
-    <IndexTitle title="精选咨询" />
-    test page.
-  </div>
-</template>
-
-<style lang="scss">
-.index {
-  &-container {
-
-    .banner {
-      .demonstration {
-        color: var(--el-text-color-secondary);
-      }
-
-      .el-carousel__item h3 {
-        color: #475669;
-        opacity: 0.75;
-        line-height: 420px;
-        margin: 0;
-        text-align: center;
-      }
-
-      .el-carousel__item:nth-child(2n) {
-        background-color: #99a9bf;
-      }
-
-      .el-carousel__item:nth-child(2n + 1) {
-        background-color: #d3dce6;
-      }
-    }
-
-  }
-}
-</style>

src/views/index/components/FloowEmpty.vue

@@ -0,0 +1,28 @@
+
+<template>
+  <div class="follow-empty-container flex-col flex-aic">
+    <h3>没有任何内容</h3>
+    <p>当关注用户发布内容时，在此显示动态</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.follow-empty-container {
+  h3 {
+    font-size: 34px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    color: #BCBCBC;
+    line-height: 48px;
+  }
+
+  p {
+    margin: 0;
+    font-size: 18px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    color: #888888;
+    line-height: 25px;
+  }
+}
+</style>

src/views/index/components/UnloginContent.vue

@@ -0,0 +1,37 @@
+
+<template>
+  <div class="unlogin-content flex-col flex-aic">
+    <h3>没有任何内容</h3>
+    <div class="tips"><span>需登录后才可显示内容</span></div>
+    <el-button type="primary" size="langer">
+      登录忆象
+    </el-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.unlogin-content {
+  width: 100%;
+  background-color: #fff;
+  padding: 60px 0 120px;
+
+  h3 {
+    height: 48px;
+    font-size: 34px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    color: #BCBCBC;
+    line-height: 48px;
+  }
+
+  .tips {
+    height: 25px;
+    font-size: 18px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    color: #888888;
+    line-height: 25px;
+    margin-bottom: 20px;
+  }
+}
+</style>

src/views/index/content.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { ref } from "vue"
+import IndexTitle from "~/components/IndexTitle/index.vue";
+import IndexNews from "~/components/IndexNews/index.vue";
+import IndexSection from "~/components/IndexSection/index.vue";
+import YXFooter from "~/components/layouts/Footer.vue";
+import TheCharts from "~/components/TheCharts/index.vue";
+
+// mock data.
+const chartsList = ref([
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  },
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  },
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  },
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  },
+  {
+    nickname: '爱思考的大毛',
+    signature: '我这一生如履薄冰。。。',
+    type: 'score'
+  }
+])
+
+
+</script>
+
+<template>
+  <div class="index-container">
+    <div class="banner">
+      <el-carousel height="420px">
+        <el-carousel-item v-for="item in 4" :key="item">
+          <h3 class="small justify-center" text="2xl">{{ item }}</h3>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <IndexTitle title="精选咨询" />
+    <div class="content-list flex-row flex-jc-sb">
+      <template v-for="(item, idx) in 9" :key="idx">
+        <IndexNews />
+      </template>
+    </div>
+    <IndexTitle title="精选文章" />
+    <div class="content-list content-list--c2 flex-row flex-jc-sb">
+      <template v-for="(item, idx) in 9" :key="idx">
+        <IndexSection :type="idx === 2 ? 'article' : 'common'" />
+      </template>
+    </div>
+    <IndexTitle title="精选视频" />
+    <div class="content-list content-list--c2 flex-row flex-jc-sb">
+      <template v-for="(item, idx) in 9" :key="idx">
+        <IndexSection />
+      </template>
+    </div>
+    <IndexTitle title="大家在聊" />
+    <div class="tags-container flex-row">
+      <template v-for="(item, idx) in 9" :key="idx">
+        <div class="tagbox">
+          <span>
+            精选视频 {{ item }}
+          </span>
+        </div>
+      </template>
+    </div>
+
+    <!-- 排行榜只有登录才有 -->
+    <template v-if="true">
+      <IndexTitle title="排行榜" />
+      <div class="sortlist-container flex-row flex-jc-sb">
+        <TheCharts :list="chartsList" type="score" header-title="积分排行" />
+        <TheCharts :list="chartsList" type="essence" header-title="精华帖排行" />
+        <TheCharts :list="chartsList" type="like" header-title="点赞排行" />
+      </div>
+    </template>
+
+    <YXFooter />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.index {
+  &-container {
+    .banner {
+      margin-bottom: 30px;
+
+      .demonstration {
+        color: var(--el-text-color-secondary);
+      }
+
+      .el-carousel__item {
+        border-radius: 6px;
+      }
+
+      .el-carousel__item h3 {
+        color: #475669;
+        opacity: 0.75;
+        line-height: 420px;
+        margin: 0;
+        text-align: center;
+      }
+
+      .el-carousel__item:nth-child(2n) {
+        background-color: #99a9bf;
+      }
+
+      .el-carousel__item:nth-child(2n + 1) {
+        background-color: #d3dce6;
+      }
+    }
+
+    .index-title-container {
+      margin-bottom: 20px;
+    }
+
+    .content-list {
+      margin-bottom: 30px;
+      column-gap: 20px;
+      flex-wrap: wrap;
+      height: 255px;
+      overflow: hidden;
+
+      &--c2 {
+        height: 337px;
+      }
+    }
+  }
+}
+
+.tags {
+  &-container {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    padding: 30px 0 0;
+    margin-bottom: 20px;
+    height: 142px;
+    overflow: hidden;
+
+    .tagbox {
+      width: 279px;
+      height: 56px;
+      text-align: center;
+      line-height: 56px;
+      background: #FFFFFF;
+      border-radius: 6px;
+      margin-right: 22px;
+      margin-bottom: 16px;
+
+      span::before {
+        content: "#";
+      }
+    }
+  }
+}
+
+.sortlist-container {
+  column-gap: 26px;
+}
+</style>

src/views/index/follow.vue

@@ -0,0 +1,38 @@
+<script setup>
+import UnloginContent from './components/UnloginContent.vue';
+import FloowEmpty from './components/FloowEmpty.vue'
+
+</script>
+
+<template>
+  <div class="index-follow-container flex-row flex-jc-sb">
+    <div class="context">
+      <!-- 尚未登录组件 -->
+      <!-- <UnloginContent /> -->
+      <FloowEmpty />
+
+    </div>
+    <div class="right-aside">
+      <!-- 日历签到 -->
+      <!-- 签到领福利 -->
+      <!-- 忆象推荐 -->
+      <!-- 文章精选 -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.index-follow-container {
+  padding: 0 76px;
+  column-gap: 24px;
+
+  .context {
+    width: 0;
+    flex: 1;
+  }
+
+  .right-aside {
+    width: 334px;
+  }
+}
+</style>