(src/router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
?{
? ?path:'/',
? ?component:()=>import('../views/index.vue')
?},
?{
? ?path:'/channelManage',
? ?component:()=>import('../views/channelManage.vue')
?}
]
const router = new VueRouter({
? routes
})
export default router
(src/main.js)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import axios from 'axios'
Vue.prototype.$axios = axios
new Vue({
? router,
? store,
? render: h => h(App)
}).$mount('#app')
(src/views/index.vue)
<template>
<div>
? <vNav></vNav>
? <div class="main">
? ? <div v-for="(item,index) in news" :key="index" class="item">
? ? ? <img :src="item.pic">
? ? ? <div class="right">
? ? ? ? <div class="title">{{item.title}}</div>
? ? ? ? <div class="bottom">
? ? ? ? ? <div class="time">{{item.time}}</div>
? ? ? ? ? <div class="type">{{item.src}}</div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</div>
</template>
<script>
import vNav from '../components/vNav.vue'
export default {
? components:{
? ? vNav
? },
? data() {
? ? return {
? ? ? news:[]
? ? }
? },
? mounted() {
? ? this.$axios.get('json/news.json').then(({data:{result:{list}}})=>{
? ? ? this.news = list
? ? })
? },
}
</script>
<style scoped lang='scss'>
.main{
? font-size: 14px;
?.item{
? ?padding: 6px;
? ?display: flex;
? ?border-bottom: 1px solid #ccc;
? ?img{
? ? ?width: 100px;
? ? ?height: 100px;
? ?}
? ?.right{
? ? ?margin-left: 6px;
? ? ?flex: 1;
? ? ?display: flex;
? ? ?flex-direction: column;
? ? ?justify-content: space-between;
? ? ?.bottom{
? ? ? ?display: flex;
? ? ? ?justify-content: space-between;
? ? ? ?font-size: 12px;
? ? ? ?color: #666;
? ? ?}
? ?}
?}
}
</style>
(src/App.vue)
<template>
? <div id="app">
? ? <router-view/>
? </div>
</template>
<script>
import axios from 'axios'
export default {
? mounted() {
? ? axios.get('json/nav.json').then(({data:{result}})=>{
? ? ? this.$store.dispatch('muChannels',result)
? ? })
? },
}
</script>
<style lang="scss">
*{
? margin: 0;
? padding: 0;
? list-style: none;
? text-decoration: none;
? outline: none;
}
html{
? font-size: 20px;
}
</style>
(src/components/vNav.vue)
<template>
<div class="nav">
? <div class="title">KGC新聞</div>
? <div class="list">
? ? <ul class="itmes">
? ? ? <li v-for="(item,index) in myNav" :key="index">{{item}}</li>
? ? </ul>
? ? <div class="add" @click="$router.push('/channelManage')">
? ? ? <img src="../assets/images/add.png">
? ? </div>
? </div>
</div>
</template>
<script>
export default {
? computed:{
? ? myNav(){
? ? ? return this.$store.state.myNav
? ? }
? }
}
</script>
<style scoped lang='scss'>
.nav{
? font-size: 14px;
? .title{
? ? height: 1.5rem;
? ? line-height: 1.5rem;
? ? background: #d43d3d;
? ? font-weight: bold;
? ? color: white;
? ? text-align: center;
? }
? .list{
? ? display: flex;
? ? justify-content: space-between;
? ? align-items: center;
? ? height: 1.5rem;
? ? background: #f4f5f6;
? ? color: #505050;
? ? .itmes{
? ? ? flex: 1;
? ? ? display: flex;
? ? ? align-items: center;
? ? ? overflow-x: scroll;
? ? ? li{
? ? ? ? padding: 0 15px;
? ? ? ? white-space: nowrap;
? ? ? }
? ? }
? ? .add{
? ? ? height: 1.5rem;
? ? ? width: 1.5rem;
? ? ? img{
? ? ? ? height: 1.5rem;
? ? ? ? width: 1.5rem;
? ? ? ? border-left: 1px solid #ccc;
? ? ? }
? ? }
? }
}
</style>
(src/store/index.js)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
? state: {
? ? allNav:[],
? ? myNav:[]
? },
? getters: {
? },
? mutations: {
? ? muChannels(state,val){
? ? ? state.allNav = val
? ? },
? ? increment(state,val){
? ? ? state.myNav.push(state.allNav[val])
? ? ? state.allNav.splice(val,1)
? ? },
? ? decrement(state,val){
? ? ? state.allNav.push(state.myNav[val])
? ? ? state.myNav.splice(val,1)
? ? }
? },
? actions: {
? ? muChannels(store,val){
? ? ? store.commit('muChannels',val)
? ? },
? ? increment(store,val){
? ? ? store.commit('increment',val)
? ? },
? ? decrement(store,val){
? ? ? store.commit('decrement',val)
? ? }
? },
? modules: {
? }
})
(src/views/channelManage.vue)
<template>
? <div class="channel">
? ? <div class="title">
? ? ? <div class="img" @click="$router.push('/')">
? ? ? ? <img src="../assets/images/back.png">
? ? ? </div>
? ? ? <div class="content">頻道管理</div>
? ? </div>
? ? <div class="box">
? ? ? <div>點(diǎn)擊刪除以下頻道</div>
? ? ? <ul>
? ? ? ? <li @click="del(index)" v-for="(item,index) in myNav" :key="index">{{item}}</li>
? ? ? </ul>
? ? </div>
? ? <div class="box">
? ? ? <div>點(diǎn)擊添加以下頻道</div>
? ? ? <ul>
? ? ? ? <li @click="add(index)" v-for="(item,index) in allNav" :key="index">{{item}}</li>
? ? ? </ul>
? ? </div>
? </div>
</template>
<script>
export default {
? computed:{
? ? myNav(){
? ? ? return this.$store.state.myNav
? ? },
? ? allNav(){
? ? ? return this.$store.state.allNav
? ? }
? },
? methods: {
? ? add(index){
? ? ? this.$store.dispatch('increment',index)
? ? },
? ? del(index){
? ? ? this.$store.dispatch('decrement',index)
? ? }
? },
};
</script>
<style scoped lang="scss">
.channel{
? font-size: 14px;
? .title{
? ? height: 2rem;
? ? background: #d43d3d;
? ? display: flex;
? ? align-items: center;
? ? .img{
? ? ? padding: 0 5px;
? ? ? display: flex;
? ? ? align-items: center;
? ? ? img{
? ? ? ? width: 1.5rem;
? ? ? }
? ? }
? ? .content{
? ? ? flex: 1;
? ? ? font-size: 16px;
? ? ? font-weight: bold;
? ? ? color: white;
? ? ? text-align: center;
? ? }
? }
? .box{
? ? padding: 10px;
? ? ul{
? ? ? display: flex;
? ? ? flex-wrap: wrap;
? ? ? li{
? ? ? ? padding: 2px;
? ? ? ? width: 60px;
? ? ? ? text-align: center;
? ? ? ? border: 1px solid #ccc;
? ? ? ? margin-right: 20px;
? ? ? ? margin-top: 4px;
? ? ? }
? ? }
? }
}
</style>
