改版页面调整

src/components/AppSidebar.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="index-nav" :class="{'index-nav-top':isActive}">
+    <div class="index-nav" :class="{ 'index-nav-top': isActive }">
         <nav class="side-navigator-wrap">
-            <div v-for="(item,index) in sideBarList" :key="index" class="nav-item-wrap">
+            <div v-for="(item, index) in sideBarList" :key="index" class="nav-item-wrap">
                 <div @click="removeTab" class="nav-item-content" :class="{ active: item.checked }">
                     <router-link :to="item.path" class="nav-item">
                         <i :class="item.icon"></i>
@@ -10,138 +10,180 @@
                 </div>
             </div>
         </nav>
+        <div class="hot-list-container">
+            <div class="hot-list-item">
+                <div class="hot-item-header">
+                    <div class="hot-title">
+                        <img src="../assets/image/hot.png"
+                            type="icon" alt="icon" class="hot-icon">
+                        <span title="热门商品" class="title-text">热门商品</span>
+                    </div>
+                </div>
+                <div class="divider" style="margin-bottom: 4px;">
+                    <div class="content"></div>
+                </div>
+                <ul class="hot-item-body">
+                    <div class="skeleton">
+                        <li class="hot-item hot-item-authors">
+                            <div class="hot-item-text hot-item-text-authors">
+                                <a href="/home/pointsMall/redeem?id=20&name=goodsNotice&type=8" class="info" title="京东云开发者">
+                                    <img src="https://xiaoyou.dgtis.com/images/image/2023/05/16/8nfqz3mxe754qtcnxdia.png"
+                                        alt="avatar" type="avatar" class="hot-item-img"></a>
+                                <span class="title-authors">
+                                    <a href="/home/pointsMall/redeem?id=20&name=goodsNotice&type=8" class="info" title="爱奇艺会员年卡">
+                                        <span class="description">爱奇艺会员年卡
+                                        </span>
+                                    </a>
+                                </span>
+                            </div>
+                        </li>
+                    </div>
+                </ul>
+                <!-- <div class="divider" style="margin-top: 4px;">
+                    <div class="content"></div>
+                </div> -->
+                <!-- <div class="hot-item-footer">
+                    <a href="/hot/authors/6809637769959178254" class="item-footer-button" target="_blank">
+                        <span>查看更多</span> 
+                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
+                            <path d="M6.6094 4.99959L3.22118 1.61137C3.13982 1.53001 3.13982 1.3981 3.22118 1.31674L3.5158 1.02212C3.59716 0.940757 3.72907 0.940757 3.81043 1.02212L7.49328 4.70496C7.656 4.86768 7.656 5.1315 7.49328 5.29422L3.81043 8.97707C3.72907 9.05843 3.59716 9.05843 3.5158 8.97707L3.22118 8.68244C3.13982 8.60108 3.13982 8.46917 3.22118 8.38781L6.6094 4.99959Z"></path>
+                        </svg>
+                    </a>
+                </div> -->
+            </div>
+        </div>
     </div>
-    
+
 </template>
 <script>
 import { removeTab } from '@/utils/auth'
 export default {
-  name: 'AppSidebar',
-  data() {
-    return {
-        sideBarList:[
-            {
-                value:'index',
-                name:'首页',
-                path:'/home/index',
-                icon:'icon-mall-tongzhi',
-                checked:false,
-            },
-            {
-                value:'pointsMall',
-                name:'积分商城',
-                path:'/home/pointsMall',
-                icon:'icon-mall-jifenshangcheng',
-                checked:false,
-            },
-            {
-                value:'signIn',
-                name:'每日签到',
-                path:'/home/signIn',
-                icon:'icon-mall-qiandao',
-                checked:false,
-            },
-            {
-                value:'festiveEvents',
-                name:'活动列表',
-                path:'/home/festiveEvents',
-                icon:'icon-mall-huodong',
-                checked:false,
-            },
-            // {
-            //     value:'myMedal',
-            //     name:'我的勋章',
-            //     path:'/home/myMedal',
-            //     icon:'icon-mall-xunzhang',
-            //     checked:false,
-            // },
-            {
-                value:'commend',
-                name:'员工表彰',
-                path:'/home/commend',
-                icon:'icon-mall-rongyubiaozhang',
-                checked:false,
-            },
-            {
-                value:'welfareList',
-                name:'福利领取',
-                path:'/home/welfareList',
-                icon:'icon-mall-hongbao',
-                checked:false,
-            },
-            
-            {
-                value:'earnPoints',
-                name:'积分获取',
-                path:'/home/earnPoints',
-                icon:'icon-mall-zuorenwuzhuanjifen',
-                checked:false,
-            },
-            {
-                value:'postInteract',
-                name:'投票调研',
-                path:'/home/postInteract',
-                icon:'icon-mall-neibuzhengyiguanli',
-                checked:false,
-            },
-            // {
-            //     value:'myCenter',
-            //     name:'个人中心',
-            //     path:'/home/myCenter',
-            //     icon:'icon-mall-gerenzhongxin',
-            //     checked:false,
-            // },
-        ],
-        employeeDynamics: false,
-        pointsMall: false,
-        welfareList: false,
-        festiveEvents: false,
-        isActive:false,
-    };
-  },
-  methods:{
-    removeTab(){
-        removeTab();
+    name: 'AppSidebar',
+    data() {
+        return {
+            sideBarList: [
+                {
+                    value: 'index',
+                    name: '首页',
+                    path: '/home/index',
+                    icon: 'icon-mall-tongzhi',
+                    checked: false,
+                },
+                {
+                    value: 'pointsMall',
+                    name: '积分商城',
+                    path: '/home/pointsMall',
+                    icon: 'icon-mall-jifenshangcheng',
+                    checked: false,
+                },
+                {
+                    value: 'signIn',
+                    name: '每日签到',
+                    path: '/home/signIn',
+                    icon: 'icon-mall-qiandao',
+                    checked: false,
+                },
+                {
+                    value: 'festiveEvents',
+                    name: '活动列表',
+                    path: '/home/festiveEvents',
+                    icon: 'icon-mall-huodong',
+                    checked: false,
+                },
+                // {
+                //     value:'myMedal',
+                //     name:'我的勋章',
+                //     path:'/home/myMedal',
+                //     icon:'icon-mall-xunzhang',
+                //     checked:false,
+                // },
+                {
+                    value: 'commend',
+                    name: '员工表彰',
+                    path: '/home/commend',
+                    icon: 'icon-mall-rongyubiaozhang',
+                    checked: false,
+                },
+                {
+                    value: 'welfareList',
+                    name: '福利领取',
+                    path: '/home/welfareList',
+                    icon: 'icon-mall-hongbao',
+                    checked: false,
+                },
+
+                {
+                    value: 'earnPoints',
+                    name: '积分获取',
+                    path: '/home/earnPoints',
+                    icon: 'icon-mall-zuorenwuzhuanjifen',
+                    checked: false,
+                },
+                {
+                    value: 'postInteract',
+                    name: '投票调研',
+                    path: '/home/postInteract',
+                    icon: 'icon-mall-neibuzhengyiguanli',
+                    checked: false,
+                },
+                // {
+                //     value:'myCenter',
+                //     name:'个人中心',
+                //     path:'/home/myCenter',
+                //     icon:'icon-mall-gerenzhongxin',
+                //     checked:false,
+                // },
+            ],
+            employeeDynamics: false,
+            pointsMall: false,
+            welfareList: false,
+            festiveEvents: false,
+            isActive: false,
+        };
     },
-    getRoute(){
-        var path = this.$route.path;
-        this.sideBarList.forEach(item => {
-            if(path.indexOf(item.value) != -1){
-                item.checked = true;
-            } else{
-                item.checked = false;
-            }     
-        });
+    methods: {
+        removeTab() {
+            removeTab();
+        },
+        getRoute() {
+            var path = this.$route.path;
+            this.sideBarList.forEach(item => {
+                if (path.indexOf(item.value) != -1) {
+                    item.checked = true;
+                } else {
+                    item.checked = false;
+                }
+            });
+        },
+        // 保存滚动值，这是兼容的写法
+        handleScroll() {
+            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+            if (scrollTop >= 80) {
+                this.isActive = true
+            } else {
+                this.isActive = false
+            }
+        },
     },
-    // 保存滚动值，这是兼容的写法
-    handleScroll () {
-        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-        if(scrollTop >= 80){
-            this.isActive = true
-        }else{
-            this.isActive = false
-        }
+    watch: {
+        $route: 'getRoute'
+    },
+    created() {
+        this.getRoute();
+    },
+    mounted() {
+        window.addEventListener('scroll', this.handleScroll)
     },
-  },
-  watch: {
-    $route:'getRoute'
-  },
-  created() {
-    this.getRoute();
-  },
-  mounted () {
-    window.addEventListener('scroll', this.handleScroll)
-  },
 
-  destroyed () {
-    // 离开该页面需要移除这个监听的事件，不然会报错
-    window.removeEventListener('scroll', this.handleScroll)
-  }
+    destroyed() {
+        // 离开该页面需要移除这个监听的事件，不然会报错
+        window.removeEventListener('scroll', this.handleScroll)
+    }
 }
 </script>
 <style scoped>
-.index-nav{
-  width: 180px;
+.index-nav {
+    width: 180px;
     position: -webkit-sticky;
     position: sticky;
     top: 80px;
@@ -149,35 +191,41 @@ export default {
     height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
-    border-radius: 4px;
-    background-color: #fff;
-    max-height: calc(100vh - 101px);
+    /* max-height: calc(100vh - 101px); */
     /* overflow-x: hidden; */
 }
-.index-nav-top{
+
+.index-nav-top {
     top: 20px;
-    max-height: calc(100vh - 40px);
+    /* max-height: calc(100vh - 40px); */
 }
+
 li a {
-    font-weight: bold;
+    /* font-weight: bold; */
     color: #515767;
 }
 
 li a.router-link-active {
     color: #1e80ff;
 }
-.side-navigator-wrap{
+
+.side-navigator-wrap {
+    border-radius: 4px;
+    background-color: #fff;
     min-width: 180px;
     box-sizing: border-box;
     padding: 8px;
     font-size: 16px;
     color: #515767;
+    margin-bottom: 1.66rem;
 }
-.nav-item-wrap{
+
+.nav-item-wrap {
     display: flex;
     flex-direction: column;
 }
-.nav-item-content{
+
+.nav-item-content {
     line-height: 24px;
     border-radius: 4px;
     cursor: pointer;
@@ -186,24 +234,155 @@ li a.router-link-active {
     align-items: center;
     justify-content: space-between;
 }
-.active{
+
+.active {
     background-color: #eaf2ff;
     color: #1e80ff;
     font-weight: 500
 }
-.nav-item{
+
+.nav-item {
     display: inline-block;
     width: 100%;
     box-sizing: border-box;
     position: relative;
     padding: 10px 17px;
 }
-.nav-item i{
+
+.nav-item i {
     vertical-align: middle;
     margin-right: 12px;
 }
-.nav-item-text{
+
+.nav-item-text {
     vertical-align: middle;
     position: relative;
 }
+/* .hot-list-container{
+    margin-top: 20px
+} */
+.hot-list-item{
+    border-radius: 4px;
+    background-color: #fff;
+    margin-bottom: 1.66rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 12px 8px;
+    overflow: hidden;
+}
+.hot-list-item .hot-item-header{
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    align-items: center;
+    padding: 0 8px;
+}
+.hot-list-item .hot-item-header .hot-title{
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #252933;
+}
+.hot-list-item .hot-item-header .hot-icon{
+    width: 1.33rem;
+    height: 1.33rem;
+    line-height: 0;
+    margin-right: .66rem;
+}
+img {
+    border-style: none;
+}
+.hot-list-item .divider {
+    width: 100%;
+    height: 1px;
+    box-sizing: border-box;
+}
+.hot-list-item .divider .content {
+    margin: 0 8px;
+    height: 100%;
+    background: rgba(228, 230, 235, 0.5);
+}
+.hot-list-item .hot-item-body {
+    min-height: 7rem;
+}
+ul {
+    padding: 0;
+    margin: 0;
+}
+.hot-list-item .hot-item-body .hot-item-authors {
+    height: 40px;
+}
+.hot-list-item .hot-item-body .hot-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 8px;
+    border-radius: 4px;
+    font-size: 1.16rem;
+    line-height: 1.83rem;
+}
+li {
+    list-style: none;
+}
+.hot-list-item .hot-item-body .hot-item .hot-item-text-authors, .hot-list-item .hot-item-body .hot-item .hot-item-text-authors .title-authors {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+.hot-list-item .hot-item-body .hot-item .hot-item-text-authors{
+    height: 100%;
+    align-items: center;
+}
+.hot-list-item .hot-item-body .hot-item .hot-item-text {
+    color: var(--juejin-font-1);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1;
+}
+a {
+    background-color: transparent;
+    margin: initial;
+    text-decoration: none;
+    cursor: pointer;
+}
+.hot-list-item .hot-item-body .hot-item .hot-item-text .hot-item-img {
+    width: 40px;
+    height: 40px;
+    /* border-radius: 50%; */
+    margin-right: 8px;
+    line-height: 0;
+}
+img {
+    border-style: none;
+}
+.hot-list-item .hot-item-body .hot-item .hot-item-text-authors .title-authors .info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    max-width: 100px;
+}
+.hot-list-item .hot-item-body .hot-item .hot-item-text-authors .title-authors .info .title {
+    font-size: 14px;
+    color: #252933;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+.hot-list-item .hot-item-body .hot-item .hot-item-text-authors .title-authors .info .description {
+    font-size: 14px;
+    /* color: #515767 !important; */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
 </style>

src/components/SiderInfo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="index-aside aside" :class="{ 'sticky top': isActive }">
-        <div class="signin-tip sidebar-block signin">
+        <div class="sidebar-block signin-tip signin">
             <div class="first-line">
                 <div class="icon-text">
                     <span class="title">
@@ -15,7 +15,7 @@
                 </button>
             </div>
         </div>
-        <div class="signin-tip sidebar-block">
+        <div class="sidebar-block signin-tip">
             <div class="avatar">
                 <el-avatar fit="fill" :size="65" :src="avatar"></el-avatar>
                 <span class="name">{{ userInfo.userName }}</span>
@@ -31,15 +31,29 @@
                 </div>
             </div>
         </div>
-        <div class="sidebar-block sticky-block">
+        <div class="sidebar-block banner-block">
+            <div class="banner banner">
+                <a href="/home/festiveEvents">
+                    <img src="https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg" width="240" height="200" class="banner-image">
+                </a> 
+                <!-- <div class="ctrl-box">
+                    <a class="label" href="/">
+                        <span class="inco">投放</span> 
+                        <span>广告</span>
+                    </a>
+                </div> -->
+            </div>
+        </div>
+        <div class="sticky-block">
+            <div class="sidebar-block signin-tip">
             <div class="avatar">
-                <el-avatar :size="65" :src="avatar"></el-avatar>
+                <el-avatar fit="fill" :size="65" :src="avatar"></el-avatar>
                 <span class="name">{{ userInfo.userName }}</span>
             </div>
             <div class="info">
                 <div class="info-item">
                     <div class="item-title">部门：</div>
-                    <div :title="userInfo.deptName" class="item-content">{{ userInfo.deptName }}</div>
+                    <div :title="userInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{ userInfo.deptName }}</div>
                 </div>
                 <div class="info-item">
                     <div class="item-title">积分：</div>
@@ -47,6 +61,20 @@
                 </div>
             </div>
         </div>
+            <div class="sidebar-block banner-block">
+            <div class="banner banner">
+                <a href="/home/festiveEvents">
+                    <img src="https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg" width="240" height="200" class="banner-image">
+                </a> 
+                <!-- <div class="ctrl-box">
+                    <a class="label" href="/">
+                        <span class="inco">投放</span> 
+                        <span>广告</span>
+                    </a>
+                </div> -->
+            </div>
+        </div>
+        </div>
     </div>
 </template>
 <script>
@@ -238,9 +266,8 @@ destroyed() {
     color: #1e80ff;
 }
 
-.sidebar-block.sticky-block {
-    padding: 20px;
-    background-color: #fff;
+.sticky-block {
+    background-color: transparent;
     box-sizing: border-box;
     position: fixed;
     box-shadow: none;
@@ -265,4 +292,57 @@ destroyed() {
 .el-avatar>img {
     width: 100%;
 }
+.sidebar-block.banner-block{
+    overflow: hidden;
+}
+.sidebar-block{
+    background-color: #fff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+    border-radius: 2px;
+    margin-bottom: 1.66rem;
+    font-size: 1.16rem;
+    line-height: 1.29;
+    border-radius: 4px;
+    color: #252933;
+}
+.sidebar-block.banner-block .banner{
+    height: 120px;
+}
+.banner{
+    position: relative;
+    font-size: 0;
+    cursor: pointer;
+}
+a {
+    margin: initial;
+    background-color: transparent;
+    text-decoration: none;
+    cursor: pointer;
+    color: #909090;
+}
+.banner .banner-image{
+    width: 100%;
+    height: 100%;
+}
+.banner .ctrl-box .label{
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    line-height: 36px;
+    height: 36px;
+    font-size: 20px;
+    z-index: 1;
+    transform: scale(.5);
+    transform-origin: right bottom;
+    color: #fff;
+    background-color: rgba(0, 0, 0, .2);
+    border: 1px solid #fff;
+    border-radius: 6px;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-weight: 300;
+}
+.banner .ctrl-box .label[data-v-f3038604]:hover {
+    background-color: rgba(0, 0, 0, .4);
+}
 </style>

src/router/index.js

@@ -144,6 +144,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
+  mode: 'history',
   linkActiveClass:'route-active',
   routes,
 })