|
|
@@ -23,19 +23,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,6 +94,8 @@ const keyword = ref('')
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+@import "~/styles/variable.scss";
|
|
|
+
|
|
|
.header {
|
|
|
&-container {
|
|
|
height: 66px;
|
|
|
@@ -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>
|
