TODO.md

@@ -0,0 +1,19 @@
+# Todo list
+
+> 复用性高的页面
+
+- [ ] 登录组件
+  * 手机登录
+  * 密码登录
+  * 微信扫码登录
+    * 微信扫码需要绑定手机号
+  * 注册账号
+- [ ] 排行榜组件
+  * 积分排行
+  * 点赞排行
+  * 精华贴排行
+- [ ] 开通会员组件
+  * 微信/支付宝支付
+- [ ] 全部话题选择组件
+- [ ] 添加客服微信组件
+

src/assets/icons/ding.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="1701502976202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="783" id="mx_n_1701502976203" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M590.334 878.222c16.512 0 29.897 13.381 29.897 29.889 0 16.271-13.006 29.506-29.191 29.88l-0.706 0.009H411.17c-16.512 0-29.897-13.382-29.897-29.89 0-16.27 13.006-29.505 29.191-29.88l0.706-0.008h179.163zM503.163 108c16.276 0 29.514 13.002 29.889 29.184l0.008 0.705 0.003 47.633c156.339 16.105 278.272 148.186 278.272 308.738v269.003h99.768c16.512 0 29.897 13.382 29.897 29.89 0 16.27-13.006 29.506-29.192 29.88l-0.705 0.009H92.897C76.385 823.042 63 809.66 63 793.152c0-16.271 13.006-29.506 29.192-29.88l0.705-0.009h97.493V494.26c0-162.123 124.333-295.216 282.873-309.178l0.003-47.193c0-16.507 13.385-29.889 29.897-29.889z m-2.3 135.651c-137.06 0-248.43 109.969-250.644 246.465l-0.034 4.144v266.704h501.356V494.26c0-137.023-110-248.362-246.533-250.575l-4.145-0.034z" fill="#333333" p-id="784"></path></svg>

src/components/layouts/Aside.vue

@@ -0,0 +1,110 @@
+<script setup>
+
+let routers = [
+  [
+    {
+      title: '首页',
+      link: '',
+    },
+    {
+      title: '文章',
+      link: '',
+    },
+    {
+      title: '咨询',
+      link: '',
+    },
+    {
+      title: '视频',
+      link: '',
+    },
+  ],
+  [
+    {
+      title: '论坛',
+      link: ''
+    }
+  ],
+  [
+    {
+      title: '商店',
+      link: ''
+    },
+    {
+      title: '积分商城',
+      link: ''
+    }
+  ],
+  [
+    {
+      title: '预约拍摄',
+      link: ''
+    },
+    {
+      title: '设备租赁',
+      link: ''
+    }
+  ]
+]
+</script>
+
+<template>
+  <div class="aside-container">
+    <template v-for="(arr, index) in routers" :key="index">
+      <div class="item-container">
+        <!-- .active selected status -->
+        <div class="itembox" v-for="(row, rowIdx) in arr" :key="rowIdx">
+          <span class="icon">ico</span>
+          <span class="title">{{ row.title }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="less">
+.aside {
+  &-container {
+    height: calc(100vh - 66px);
+    padding: 0 8px;
+    background-color: #fff;
+
+    .item-container {
+      padding: 10px 0;
+      border-bottom: 1px solid #d4d4d4;
+
+      .itembox {
+        padding: 11px 20px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 22px;
+
+        &.active {
+          color: #00B0B0;
+          // width: 194px;
+          // height: 44px;
+          background: rgba(87, 195, 194, 0.14);
+          border-radius: 4px;
+        }
+
+        .icon {
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+
+      &:first-child {
+        // padding-top: initial;
+      }
+
+      &:last-child {
+        padding-bottom: initial;
+        border-bottom: initial;
+      }
+    }
+  }
+}
+</style>

src/components/layouts/Header.vue

@@ -12,9 +12,6 @@ const keyword = ref('')
 
 <template>
   <div class="header-container flex-row flex-aic flex-jc-sb">
-    <svg aria-hidden="true">
-      <use href="../../assets/icons/people.svg" fill="#000000" />
-    </svg>
     <div class="logo">ny-logo</div>
     <div class="header__content flex-row flex-aic flex-jc-sb">
       <el-input v-model="keyword" class="searchbox" placeholder="VR拍摄" :suffix-icon="Search" />
@@ -23,19 +20,70 @@ const keyword = ref('')
         <el-button type="primary">最新</el-button>
       </el-button-group>
       <div class="header__content__right">
-        <el-button class="vip-btn">
-          <SvgIcon name="crown" :size="19" :rgap="3" color="#523618" />
-          忆象会员
-        </el-button>
+        <el-popover popper-class="vip-poperclass" placement="bottom" :width="332" trigger="click">
+          <template #reference>
+            <el-button class="vip-btn">
+              <SvgIcon name="crown" :size="19" :rgap="3" color="#523618" />
+              忆象会员
+            </el-button>
+          </template>
+          <div class="vip-container">
+            <div class="vip-card flex-col flex-jc-sb">
+              <div class="vip-card__header flex-row">
+                <div class="vip-avatar"></div>
+                <div class="vip-userinfo">
+                  <div class="vname">Bruce Bennett</div>
+                  <div class="vdesc">面朝大海....</div>
+                </div>
+              </div>
+              <div class="vip-card__footer flex-row flex-jc-sb">
+                <template v-if="user.isVip">
+                  <span>会员有效期至2024-10-10</span>
+                  <span>立即续费</span>
+                </template>
+                <template v-else>
+                  <span>开通会员享权益</span>
+                  <span>立即开通</span>
+                </template>
+              </div>
+            </div>
+            <div class="vip-sign-prizes">
+              <div class="prize-box">
+                <div class="prize-box__img"></div>
+                <div class="prize-box__title">等级达到10级</div>
+                <div class="prize-box__sub-title">积分奖励+100</div>
+                <!-- NOTE: 三种状态, 已领取/领取/未达标 -->
+                <el-button type="primary" disabled>已领取</el-button>
+              </div>
+              <div class="prize-box">
+                <div class="prize-box__img"></div>
+                <div class="prize-box__title">等级达到10级</div>
+                <div class="prize-box__sub-title">积分奖励+100</div>
+                <!-- NOTE: 三种状态, 已领取/领取/未达标 -->
+                <el-button type="primary">领取</el-button>
+              </div>
+              <div class="prize-box">
+                <div class="prize-box__img"></div>
+                <div class="prize-box__title">等级达到10级</div>
+                <div class="prize-box__sub-title">积分奖励+100</div>
+                <!-- NOTE: 三种状态, 已领取/领取/ -->
+                <el-button link disabled>未达标</el-button>
+              </div>
+            </div>
+            <div class="vip-footer">等级奖励</div>
+          </div>
+        </el-popover>
         <!-- NOTE: 邀请好友&发布 用户登录才有 -->
-        <template v-if="user.name">
+        <template v-if="!user.name">
           <el-button type="primary">
             <SvgIcon name="people" :size="19" color="#ffffff" />
             邀请好友
           </el-button>
           <el-button type="primary" :icon="Promotion">发布</el-button>
+          <el-button link>
+            <SvgIcon name="ding" :size="24"></SvgIcon>
+          </el-button>
         </template>
-
         <el-button type="primary">登录/注册</el-button>
       </div>
     </div>
@@ -43,11 +91,16 @@ const keyword = ref('')
 </template>
 
 <style lang="scss" scoped>
+@import "~/styles/variable.scss";
+
 .header {
   &-container {
     height: 66px;
     background: #FFFFFF;
     box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.06);
+    padding-right: 20px;
+    border-bottom: 1px solid rgba(240, 240, 240, 1);
+    box-sizing: border-box;
   }
 
   &__content {
@@ -65,7 +118,6 @@ const keyword = ref('')
   .logo {
     width: 210px;
     height: 66px;
-    // box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.06);
   }
 
   .searchbox {
@@ -79,4 +131,112 @@ const keyword = ref('')
   }
 
 }
+
+.vip {
+  &-container {
+    width: 308px;
+    padding: 4px;
+    box-sizing: border-box;
+  }
+
+  &-poperclass {
+    background: #FFFFFF;
+    box-shadow: 0px 0px 20px -8px rgba(0, 0, 0, 0.4);
+    border-radius: 8px;
+  }
+
+  &-card {
+    width: 300px;
+    height: 122px;
+    border-radius: 10px;
+    background-image: url("~/assets/vip/bgc.png");
+    background-size: 300px 122px;
+    padding: 14px 12px 18px 14px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    &__header {
+      .vip-avatar {
+        width: 36px;
+        height: 36px;
+        background-color: #fff;
+        border-radius: 36px;
+      }
+
+      .vip-userinfo {
+        padding-left: 10px;
+
+        .vname {
+          font-size: 14px;
+          font-weight: 500;
+          color: #FFFFFF;
+          line-height: 16px;
+        }
+
+        .vdesc {
+          font-size: 12px;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: 22px;
+        }
+      }
+    }
+
+    &__footer {
+      span {
+        &:last-child {
+          color: $orange;
+        }
+      }
+    }
+  }
+
+  &-sign-prizes {
+    display: grid;
+    grid-template-columns: repeat(3, 33.33%);
+    padding: 20px 0;
+
+    .prize-box {
+      text-align: center;
+
+      &__img {
+        width: 48px;
+        height: 48px;
+        background: #FF7B15;
+        border-radius: 8px;
+        opacity: 0.1;
+        margin: 0 auto 6px;
+      }
+
+      &__title {
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 26px;
+      }
+
+      &__sub-title {
+        font-size: 12px;
+        font-weight: 400;
+        color: #888888;
+        line-height: 18px;
+        margin-bottom: 6px;
+      }
+
+      .el-button.el-button--primary.is-disabled {
+        background-color: #D8D8D8;
+      }
+    }
+  }
+
+  &-footer {
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: #57C3C2;
+    // line-height: 40px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(204, 204, 204, 0.4);
+  }
+}
 </style>

src/main.js

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
+
 import 'normalize.css'
-import '~/styles/variable.scss'
 import '~/styles/index.scss'
 import 'dayjs/locale/zh-cn'
 

src/styles/index.scss

@@ -1,3 +1,5 @@
+@use "./variable.scss";
+
 body {
   min-width: 1200px;
   background-color: rgba(247, 247, 247, 1);

src/styles/variable.scss

@@ -0,0 +1 @@
+$orange: rgba(255, 123, 21, 1);

src/views/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import vHeader from '~/components/layouts/Header.vue'
+import vAside from '~/components/layouts/Aside.vue'
 
 </script>
 
@@ -10,7 +11,9 @@ import vHeader from '~/components/layouts/Header.vue'
         <v-header />
       </el-header>
       <el-container>
-        <el-aside width="200px">aside</el-aside>
+        <el-aside width="200px">
+          <v-aside />
+        </el-aside>
         <el-main>
           <router-view v-slot="{ Component }">
             <transition name="move" mode="out-in">
@@ -27,6 +30,8 @@ import vHeader from '~/components/layouts/Header.vue'
 <style lang="scss" scoped>
 .container {
   .header {
+    padding-left: 0;
+    padding-right: 0;
     height: 66px;
     background-color: #fff;
   }

vite.config.js

@@ -18,6 +18,7 @@ export default defineConfig({
     preprocessorOptions: {
       scss: {
         additionalData: `@use "~/styles/element/index.scss" as *;`
+        // `@import "~/styles/index.scss";`
       }
     }
   },