admin

12_vuecli/mediaapp/src/App.vue

@@ -1,15 +1,24 @@
 <template>
   <div id="app">
-    <nav>
+    <!-- <nav>
       <router-link to="/">Tv</router-link>|
       <router-link to="/book">Book</router-link>|
       <router-link to="/talk">Talk</router-link>|
       <router-link to="/mine">Mine</router-link>
     </nav>
+    <router-view/> -->
+    <NavComp></NavComp>
     <router-view/>
   </div>
 </template>
-
+<script>
+import NavComp from '@/components/NavComp.vue'
+export default {
+  components: {
+    NavComp
+  }
+}
+</script>
 <style>
 
 </style>

12_vuecli/mediaapp/src/assets/css/iconfont.css

@@ -0,0 +1,35 @@
+@font-face {
+    font-family: "iconfont"; /* Project id 4831992 */
+    src: url('//at.alicdn.com/t/c/font_4831992_hguvkpo926.woff2?t=1739944795187') format('woff2'),
+         url('//at.alicdn.com/t/c/font_4831992_hguvkpo926.woff?t=1739944795187') format('woff'),
+         url('//at.alicdn.com/t/c/font_4831992_hguvkpo926.ttf?t=1739944795187') format('truetype');
+  }
+  
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  .icon-user:before {
+    content: "\e608";
+  }
+  
+  .icon-home:before {
+    content: "\e7c6";
+  }
+  
+  .icon-talk:before {
+    content: "\e7ab";
+  }
+  
+  .icon-book:before {
+    content: "\e862";
+  }
+  
+  .icon-tv:before {
+    content: "\e677";
+  }
+  

12_vuecli/mediaapp/src/assets/css/reset.css

@@ -0,0 +1,10 @@
+body{
+    margin: 0;
+}
+ul{
+    margin: 0;
+    padding: 0;
+}
+li{
+    list-style: none;
+}

12_vuecli/mediaapp/src/components/NavComp.vue

@@ -0,0 +1,160 @@
+<template>
+    <div :class="['nav-comp',activeClass]">
+        <div class="header">
+            <i class="home-btn iconfont icon-home"></i>
+            <div class="title">{{titleText}}</div>
+        </div>
+        <div class="nav">
+            <ul>
+                <li :class="{'active':item.id == activeTab}" v-for="item in tabBtn" :key="item.id" @touchstart="goPage(item.path,item.id)">
+                    <i :class="['iconfont',item.icon]"></i>
+                    <span>{{item.name}}</span>
+                </li>
+                <!-- <li @touchstart="goPage('/book')">
+                    <i class="iconfont icon-book"></i>
+                    <span>图书</span>
+                </li>
+                <li @touchstart="goPage('/talk')">
+                    <i class="iconfont icon-talk"></i>
+                    <span>聊天</span>
+                </li>
+                <li @touchstart="goPage('/mine')">
+                    <i class="iconfont icon-user"></i>
+                    <span>我的</span>
+                </li> -->
+            </ul>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            activeTab:'1001',
+            tabBtn:[
+                {   
+                    id:1001,
+                    name:'剧集',
+                    path:'/',
+                    icon:"icon-tv",
+                    classVal:"tv"
+     
+                },{
+                    id:1002,
+                    name:'图书',
+                    path:'/book',
+                    icon:"icon-book",
+                    classVal:"book"
+                },{
+                    id:1003,
+                    name:'聊天',
+                    path:'/talk',
+                    icon:"icon-talk",
+                    classVal:"talk"
+                },{
+                    id:1004,
+                    name:'我的',
+                    path:'/mine',
+                    icon:"icon-user",
+                    classVal:"mine"
+                }
+            ]
+        }
+    },
+    computed:{
+        titleText(){
+            let _thisVal = "";
+            this.tabBtn.forEach(val => {
+                if(val.id == this.activeTab){
+                    _thisVal = val.name;
+                }
+            });
+            return _thisVal;
+        },
+        activeClass(){
+            let _thisVal = "";
+            this.tabBtn.forEach(val => {
+                if(val.id == this.activeTab){
+                    _thisVal = val.classVal;
+                }
+            });
+            return _thisVal;
+        }
+    },
+    methods: {
+        goPage(path,id){
+            this.$router.push(path);
+            this.activeTab = id;
+        }
+    },
+}
+</script>
+<style scoped>
+    .header{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 1rem;
+        background-color: #367962;
+    }
+    .header .home-btn{
+        position: absolute;
+        left: .3rem;
+        top:50%;
+        transform: translateY(-50%);
+        color: #fff;
+        font-size: .5rem;
+        font-weight: 700;
+    }
+    .header .title{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        color: #fff;
+        font-size: .5rem;
+    }
+
+    .nav{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100vw;
+        height: 1rem;
+        background-color: #367962;
+        border-radius: .2rem;
+    }
+    .nav ul{
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        height: 100%;
+    }
+    .nav ul li.active{
+        transform: translateY(-.1rem);
+    }
+    .nav ul li{
+        font-size: .3rem;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .nav li .iconfont{
+        font-size: .4rem;
+    }
+
+    .tv .header,.tve .nav{
+        background-color: #367962;
+    }
+    .book .header,.book .nav{
+        background-color: #409EFF;
+    }
+    .talk .header,.talk .nav{
+        background-color: #9bb771;
+    }
+    .mine .header,.mine .nav{
+        background-color: #6165a9;
+    }
+</style>

12_vuecli/mediaapp/src/main.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import "@/assets/js/rem"
+import "@/assets/css/iconfont.css"
+import "@/assets/css/reset.css"
 
 Vue.config.productionTip = false