e
3 years ago
parent
acac942ff4
commit
947ea77e48
80 changed files with 24746 additions and 0 deletions
@ -0,0 +1,22 @@ |
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
|
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/cli-plugin-babel/preset' |
||||
] |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,58 @@ |
||||
{ |
||||
"name": "sichuan", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"serve": "vue-cli-service serve", |
||||
"build": "vue-cli-service build", |
||||
"lint": "vue-cli-service lint" |
||||
}, |
||||
"dependencies": { |
||||
"amfe-flexible": "^2.2.1", |
||||
"axios": "^0.19.2", |
||||
"core-js": "^3.6.5", |
||||
"element-ui": "^2.13.2", |
||||
"lib-flexible": "^0.3.2", |
||||
"normalize.css": "^8.0.1", |
||||
"postcss-px2rem": "^0.3.0", |
||||
"postcss-pxtorem": "^5.1.1", |
||||
"px2rem-loader": "^0.1.9", |
||||
"vue": "^2.6.11", |
||||
"vue-i18n": "^8.21.0", |
||||
"vue-router": "^3.2.0", |
||||
"vue-video-player": "^5.0.2", |
||||
"vuex": "^3.4.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@vue/cli-plugin-babel": "^4.4.0", |
||||
"@vue/cli-plugin-eslint": "^4.4.0", |
||||
"@vue/cli-plugin-router": "^4.4.0", |
||||
"@vue/cli-plugin-vuex": "^4.4.0", |
||||
"@vue/cli-service": "^4.4.0", |
||||
"babel-eslint": "^10.1.0", |
||||
"eslint": "^6.7.2", |
||||
"eslint-plugin-vue": "^6.2.2", |
||||
"less": "^3.0.4", |
||||
"less-loader": "^5.0.0", |
||||
"vue-template-compiler": "^2.6.11" |
||||
}, |
||||
"eslintConfig": { |
||||
"root": true, |
||||
"env": { |
||||
"node": true |
||||
}, |
||||
"extends": [ |
||||
"plugin:vue/essential", |
||||
"eslint:recommended" |
||||
], |
||||
"parserOptions": { |
||||
"parser": "babel-eslint" |
||||
}, |
||||
"rules": {} |
||||
}, |
||||
"browserslist": [ |
||||
"> 1%", |
||||
"last 2 versions", |
||||
"not dead" |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,22 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
<link rel="icon" href="2.png"> |
||||
<title>智信云官网</title> |
||||
<style> |
||||
|
||||
</style> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"> |
||||
</div> |
||||
<!-- built files will be auto injected --> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,30 @@ |
||||
<template> |
||||
<div id="app"> |
||||
<!-- <button @click="changeLanguage()" >{{$t('language.name')}}</button> --> |
||||
<Topbar v-show="this.$route.path != '/login'"></Topbar> |
||||
<router-view></router-view> |
||||
<Bottom v-show="this.$route.path != '/login'"></Bottom> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Topbar from "@/components/Topbar.vue"; |
||||
import Bottom from "@/components/Bottom.vue"; |
||||
export default { |
||||
components: { |
||||
Topbar,//顶部组件 |
||||
Bottom,//底部组件 |
||||
}, |
||||
methods: { |
||||
|
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="less"> |
||||
#app { |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-align: center; |
||||
color: #2c3e50; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,162 @@ |
||||
import axios from 'axios'; |
||||
//后台接口地址
|
||||
// axios.defaults.baseURL='http://139.9.247.137/msdw';
|
||||
// axios.defaults.baseURL='https://www.feifanhitech.com/msdw';
|
||||
// axios.defaults.baseURL='http://www.zxyicloud.com/msdw';
|
||||
axios.defaults.baseURL='http://47.107.237.129/msdw'; |
||||
//轮播图信息
|
||||
export function carousel(parms){ |
||||
return axios.get('/carouse/carouse/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//标题信息
|
||||
export function titlelink(parms){ |
||||
return axios.get('/headline/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//一级栏目
|
||||
export function columnlink(parms){ |
||||
return axios.get('/column/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
|
||||
//二级栏目
|
||||
export function columnlinkcontent(parms){ |
||||
return axios.get('/column/column/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//根据id查找分类
|
||||
export function linkclassify(parms){ |
||||
return axios.get('/classify/classifies/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//二级栏目七
|
||||
export function _queryStock( params ){ |
||||
return axios.get('/column/column/7', { |
||||
params |
||||
}).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//获取文章
|
||||
export function teacheritems( params ){ |
||||
return axios.get('/article/articles/'+params |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//获取所有二级栏目
|
||||
export function allColumn(){ |
||||
return axios.get('/column/column' |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//查看该栏目下的文章详情
|
||||
export function getColumnarticle(parms,pangNum){ |
||||
return axios.get('/column/column/showArticle/'+parms+'?pangNum='+pangNum, |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//根据文章id获得文章
|
||||
export function getArticlemessage(parms){ |
||||
return axios.get('/article/articles/'+parms, |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//返回一级栏目
|
||||
export function returnColumn(parms){ |
||||
return axios.get('/column/'+parms, |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//根据父级id查找它的子级
|
||||
export function getColumnchildren(parms){ |
||||
return axios.get('/column/children/'+parms, |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//获取主页上各部分的id，根据id查询各部分的详情
|
||||
export function getHomecolumn(){ |
||||
return axios.get('/homepage/getAllPage' |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//根据id查找图片
|
||||
export function getHomebanner(parms){ |
||||
return axios.get('/img/images/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//新增图片信息
|
||||
export function postHomebanner(parms){ |
||||
return axios.post('/img/images',parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//获取主页轮播图信息
|
||||
export function getHomecarouse(parms){ |
||||
return axios.get('/carouse/carouse/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//根据id查找标题
|
||||
export function getHomeheadline(parms){ |
||||
return axios.get('/headline/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//根据id查找链接
|
||||
export function getHomelinks(parms){ |
||||
return axios.get('/link/'+parms |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//获取所有未被删除的分类
|
||||
export function getHomeclassify(){ |
||||
return axios.get('/classify/classifies' |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//获得所有友情链接，未被删除的，管理系统
|
||||
export function getHomefriendlink(){ |
||||
return axios.get('/friendshipLink/getAll' |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//获取所有友情链接分类及子级信息
|
||||
export function getHomelink(){ |
||||
return axios.get('/friendshipLink/friendshipLinkGet/all' |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
//获取访问人数
|
||||
export function getTotal(){ |
||||
return axios.get('/page/total', |
||||
).then(res=>{ |
||||
return res.data.data |
||||
}); |
||||
} |
||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 475 B |
|
After Width: | Height: | Size: 288 KiB |
|
After Width: | Height: | Size: 385 KiB |
|
After Width: | Height: | Size: 651 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 679 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 421 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 257 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 645 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 244 KiB |
|
After Width: | Height: | Size: 333 B |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,33 @@ |
||||
html,body{ |
||||
height: 100%; |
||||
font-size: 0.32rem; |
||||
} |
||||
#app{ |
||||
overflow: hidden; |
||||
text-align: left; |
||||
//height: 100%; |
||||
//font-family:'Source Han Serif CN' ; |
||||
} |
||||
.container{ |
||||
width: 1200px; |
||||
margin: 0 auto; |
||||
margin-top: 30px; |
||||
} |
||||
ul,li,p,h3{ |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
} |
||||
ul,li{ |
||||
list-style: none; |
||||
} |
||||
a{ |
||||
text-decoration: none; |
||||
color: #000; |
||||
} |
||||
.clearfix::after{ |
||||
display: block; |
||||
content: ""; |
||||
clear: both; |
||||
height: 0; |
||||
} |
||||
@ -0,0 +1,93 @@ |
||||
<template> |
||||
<div class="bottom" > |
||||
|
||||
<div class="container" style="padding-bottom:30px"> |
||||
<div class="left"> |
||||
<div style="width: 150px;height: 150px;"> |
||||
<div style="width: 100px;height: 100px;margin:auto"> |
||||
<img style="width: 100px;height: 100px;" src="../assets/images/baseLogo1.png" alt="" /> |
||||
</div> |
||||
<div style="width: 100px;height: 40px;margin:auto"> |
||||
<img style="width: 100px;height: 40px;" src="../assets/images/baseLogo2.png" alt="" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="center"> |
||||
<div> |
||||
<p><span>安徽智信云教育科技有限公司</span></p> |
||||
<p><span>公司地址：安徽省合肥市高新区中安创谷A4栋322室</span></p> |
||||
<p><span>联系电话：0551-63858107 15385514775</span></p> |
||||
<p><span>公司邮箱：zhixinchain@163.com</span></p> |
||||
|
||||
<!-- --> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<img src="../assets/images/baseQRCode.jpeg" alt="" /> |
||||
</div> |
||||
</div> |
||||
<div style="width: 100%;text-align: center;clear:both;background: #303133;position: relative;bottom: 52px;font-size: 12px;height: 30px;line-height: 22px"> |
||||
<p><span style="color: #909399">copyright © 安徽智信云教育科技有限公司 版权所有</span></p> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.bottom { |
||||
position: relative; |
||||
bottom: 0px; |
||||
font-family: 'Source Han Serif CN'; |
||||
height: 200px; |
||||
background: #2d2d2d; |
||||
font-size: 14px; |
||||
.container { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
.left { |
||||
//display: block; |
||||
margin-right: 78px; |
||||
height: 58px; |
||||
padding-right: 78px; |
||||
margin-right: 78px; |
||||
//border-right: 2px solid #fff; |
||||
} |
||||
.center { |
||||
padding-right: 102px; |
||||
} |
||||
} |
||||
img { |
||||
width: 150px; |
||||
height: 150px; |
||||
margin-bottom: 3px; |
||||
} |
||||
span { |
||||
color: #fff; |
||||
margin-left: 10px; |
||||
} |
||||
.left, |
||||
.right, |
||||
.center { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.right, |
||||
.center { |
||||
height: 78px; |
||||
div{ |
||||
margin-top: 15px; |
||||
p{ |
||||
margin-bottom: 15px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,123 @@ |
||||
<template> |
||||
<div class="menu-tree"> |
||||
<span class="two-title">{{ this.$store.state.columnmessage.TopColumnname }}</span> |
||||
<label v-for="list in dataList" :key="list.id"> |
||||
<el-submenu :index="list.id + ''" v-if="list.children.length != 0"> |
||||
<template slot="title"> |
||||
<span>{{ list.columnName }}</span> |
||||
</template> |
||||
<label> |
||||
<Child :dataList="list.children"></Child> |
||||
</label> |
||||
</el-submenu> |
||||
<el-menu-item |
||||
:index="list.id + ''" |
||||
v-else |
||||
@click="getColumnmessage(list.id)" |
||||
> |
||||
<span slot="title">{{ list.columnName }}</span> |
||||
</el-menu-item> |
||||
</label> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getColumnarticle } from "@/apis/request.js"; |
||||
import { getColumnchildren } from "@/apis/request.js"; |
||||
import { returnColumn } from "@/apis/request.js"; |
||||
export default { |
||||
name: "Child", |
||||
props: ["dataList"], |
||||
|
||||
data() { |
||||
return { |
||||
id: 12, |
||||
}; |
||||
}, |
||||
methods: { |
||||
getColumnmessage(key) { |
||||
|
||||
this.$store.state.bottomcolumnid = key; |
||||
this.$router.push({ |
||||
path: |
||||
"/ChuanDa/" + this.$store.state.columnmessage.id + "/leftmenu/" + key, |
||||
}); |
||||
|
||||
|
||||
getColumnchildren(key).then((res) => { |
||||
if (res.length == 0) { |
||||
getColumnarticle(key, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(key).then((res) => { |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
}); |
||||
} else { |
||||
getColumnarticle(res[0].id, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(res[0].id).then((res) => { |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.two-title{ |
||||
height:56px; |
||||
line-height: 56px; |
||||
margin: auto; |
||||
display: inline-block; |
||||
width: 160px; |
||||
border-bottom: 2px solid #ccc; |
||||
font-size: 20px; |
||||
} |
||||
.el-menu-item.is-active { |
||||
color: #fff !important; |
||||
background-color: #409eff !important; |
||||
} |
||||
.el-menu-item:hover { |
||||
color: #fff !important; |
||||
background-color: #409eff !important; |
||||
} |
||||
// label:nth-child(1) .el-menu-item:nth-child(1):hover { |
||||
// background-color: #ccc !important; |
||||
// } |
||||
.el-menu > .menu-tree > label:nth-child(1) > .el-menu-item { |
||||
margin-bottom: 10px; |
||||
|
||||
span { |
||||
margin: 0 auto; |
||||
display: inline-block; |
||||
width: 160px; |
||||
border-bottom: 2px solid #ccc; |
||||
font-size: 20px; |
||||
} |
||||
} |
||||
.el-menu > .menu-tree > label:nth-child(1) > .el-menu-item:hover { |
||||
background-color: #f3f3f3 !important; |
||||
color: #000 !important; |
||||
} |
||||
.el-menu > .menu-tree > label:nth-child(1) > .el-menu-item.is-active { |
||||
color: #000 !important; |
||||
background-color: #f3f3f3 !important; |
||||
} |
||||
.el-menu-vertical-demo .el-submenu .el-submenu__title:hover { |
||||
background: #409eff !important; |
||||
} |
||||
.el-menu-vertical-demo .el-submenu.is-opened .el-submenu__title { |
||||
background: #409eff !important; |
||||
color: #fff; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,154 @@ |
||||
<template> |
||||
<div class="topbar"> |
||||
<!-- 大学logo --> |
||||
<div> |
||||
<img src="../assets/images/logo1.png" alt="" srcset=""> |
||||
</div> |
||||
<!-- 标题导航 --> |
||||
<ul class="clearfix"> |
||||
<li |
||||
v-for="value in columnall" |
||||
:key="value.id" |
||||
@click="route(value.id, value.columnName)" |
||||
> |
||||
<span |
||||
:class="{ |
||||
active: |
||||
$route.path.indexOf('ChuanDa/' + value.id) > 0 ? true : false, |
||||
}" |
||||
>{{ value.columnName }}</span> |
||||
</li> |
||||
</ul> |
||||
|
||||
<div class="posit"> |
||||
<div class="line"></div> |
||||
<div class="circle clearfix" @click="mange()"> |
||||
<div></div> |
||||
<div></div> |
||||
<div></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { allColumn } from "@/apis/request.js"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
columnall: [],//导航栏内容 |
||||
}; |
||||
}, |
||||
methods: { |
||||
fun(a) { |
||||
this.$router.push(a); |
||||
}, |
||||
mange() { |
||||
location.href = "http://47.107.237.129/mange/#/login"; |
||||
}, |
||||
route(id, name) { |
||||
console.log(name); |
||||
const { href } = this.$router.resolve({ |
||||
path: `/ChuanDa/` + id + "/leftmenu/0", |
||||
}); |
||||
window.open(href, "_self"); |
||||
this.$store.state.columnmessage.id = id; |
||||
}, |
||||
}, |
||||
computed: {}, |
||||
mounted() { |
||||
allColumn().then((res) => {//获取导航栏 |
||||
this.columnall = res; |
||||
this.columnall = this.columnall.filter((res) => { |
||||
if (res.isShow == 0) { |
||||
return res; |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.topbar { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 10px; |
||||
height: 50px; |
||||
display: flex; |
||||
position: relative; |
||||
background: #fff; |
||||
.posit { |
||||
display: flex; |
||||
right: 10px; |
||||
width: 24px; |
||||
justify-content: space-between; |
||||
} |
||||
.line { |
||||
width: 1px; |
||||
height: 30px; |
||||
margin-top: 10px; |
||||
background: rgba(0, 0, 0, 0.678); |
||||
} |
||||
img { |
||||
height: 50px; |
||||
} |
||||
color: #000; |
||||
// .clearfix::after { |
||||
// content: ""; |
||||
// display: block; |
||||
// clear: both; |
||||
// height: 0; |
||||
// } |
||||
ul { |
||||
width: 60%; |
||||
height: 30px; |
||||
font-size: 16px; |
||||
line-height: 50px; |
||||
padding: 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
ul li { |
||||
// float: left; |
||||
list-style: none; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
span { |
||||
display: inline-block; |
||||
height: 30px; |
||||
font-size: 18px; |
||||
font-family: "Source Han Serif CN"; |
||||
color: rgba(0, 0, 0, 0.678); |
||||
} |
||||
} |
||||
ul li:hover { |
||||
span { |
||||
color: #409eff; |
||||
} |
||||
} |
||||
// ul li:first-child { |
||||
// margin-left: 160px; |
||||
// } |
||||
.circle { |
||||
margin-top: 10px; |
||||
width: 4px; |
||||
height: 50px; |
||||
} |
||||
.circle:hover { |
||||
cursor: pointer; |
||||
} |
||||
.circle > div { |
||||
margin-top: 5px; |
||||
height: 4px; |
||||
width: 4px; |
||||
background: rgba(0, 0, 0, 0.678); |
||||
border-radius: 2px; |
||||
} |
||||
.active { |
||||
color: #409eff; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,31 @@ |
||||
import Vue from 'vue' |
||||
import App from './App.vue' |
||||
//导入路由
|
||||
import router from './router' |
||||
//导入vuex
|
||||
import store from './store' |
||||
//导入element-ui
|
||||
import ElementUI from 'element-ui'; |
||||
import 'element-ui/lib/theme-chalk/index.css'; |
||||
import 'normalize.css' |
||||
//导入公共样式
|
||||
import '@/assets/styles/common.less' |
||||
//导入视频播放器
|
||||
import VideoPlayer from 'vue-video-player' |
||||
import 'video.js/dist/video-js.css' |
||||
import 'vue-video-player/src/custom-theme.css' |
||||
//rem适配px
|
||||
import 'lib-flexible/flexible.js' |
||||
//使用外部组件
|
||||
Vue.use(VideoPlayer) |
||||
Vue.use(ElementUI); |
||||
//去掉vue警告（用于生产不提示）
|
||||
|
||||
|
||||
Vue.config.productionTip = false; |
||||
new Vue({ |
||||
router, |
||||
store, |
||||
// i18n,
|
||||
render: h => h(App) |
||||
}).$mount('#app') |
||||
@ -0,0 +1,59 @@ |
||||
import Vue from "vue"; |
||||
import VueRouter from "vue-router"; |
||||
|
||||
|
||||
|
||||
|
||||
Vue.use(VueRouter); |
||||
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
|
||||
const originalPush = VueRouter.prototype.push |
||||
VueRouter.prototype.push = function push(location) { |
||||
return originalPush.call(this, location).catch(err => err) |
||||
} |
||||
const routes = [ |
||||
{ |
||||
path: "/", |
||||
//默认跳转路由
|
||||
redirect:'/ChuanDa/66/leftmenu/0', |
||||
}, |
||||
{ |
||||
path: "/login", |
||||
name: "login", |
||||
component: () => import("../views/Login.vue"), |
||||
}, |
||||
{ |
||||
path: "/ChuanDa/:id", |
||||
name:"ChuanDa", |
||||
props:true, |
||||
component: () => import("../views/Levelsone.vue"), |
||||
children: [ |
||||
{ |
||||
path: "leftmenu/:a", |
||||
name: "Leftmenu", |
||||
props:true, |
||||
component: () => import("../views/Contain.vue"), |
||||
}, |
||||
{ |
||||
path: "leftmenu/:a/description/:b", |
||||
name: "Description", |
||||
props:true, |
||||
component: () => import("../views/Description.vue"), |
||||
|
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
path: "*", |
||||
component: () => import("../views/Notfound.vue"), |
||||
|
||||
}, |
||||
|
||||
]; |
||||
|
||||
const router = new VueRouter({ |
||||
// mode:"hash",//路由模式为history
|
||||
// base:'/sc/',
|
||||
routes, |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,43 @@ |
||||
import Vue from 'vue' |
||||
import Vuex from 'vuex' |
||||
import { returnColumn } from "@/apis/request.js"; |
||||
Vue.use(Vuex) |
||||
|
||||
export default new Vuex.Store({ |
||||
state: { |
||||
id:sessionStorage.getItem('id'), |
||||
name:"", |
||||
bottomcolumnid:0, |
||||
bgImgUrl:'', |
||||
columnmessage:{ |
||||
id:0,//导航栏目id
|
||||
english:'', |
||||
columnName:"",//二级左侧导航栏目名
|
||||
data:[],//栏目文章内容
|
||||
showType:'',//是否显示
|
||||
styleType:"",//是否选中
|
||||
total:0,//栏目中文章篇数
|
||||
bgImgUrl:"",//背景图片
|
||||
TopColumnname:'' |
||||
} |
||||
}, |
||||
mutations: { |
||||
increment (state,payload) { |
||||
// 变更状态
|
||||
state.columnmessage.bgImgUrl=payload.bgImgUrl; |
||||
} |
||||
}, |
||||
actions: { |
||||
increment (context) { |
||||
returnColumn().then(res=>{ |
||||
context.commit({ |
||||
type: 'increment', |
||||
amount: res[0].bgImgUrl |
||||
}) |
||||
}) |
||||
|
||||
} |
||||
}, |
||||
modules: { |
||||
} |
||||
}) |
||||
@ -0,0 +1,375 @@ |
||||
<template> |
||||
<div class="newsnotice"> |
||||
<!-- <div class="title" > |
||||
<span>{{ this.$store.state.columnmessage.columnName }}</span> |
||||
|
||||
</div> --> |
||||
<div |
||||
class="titlebottomone" |
||||
v-if=" |
||||
(showType == 1 && $store.state.columnmessage.data.length > 1) || |
||||
(showType == 1 && $store.state.columnmessage.styleType == 2) |
||||
" |
||||
> |
||||
<div class="title"> |
||||
<span>{{ this.$store.state.columnmessage.columnName }}</span> |
||||
<!-- <a href="">< 返回</a> --> |
||||
</div> |
||||
<div |
||||
@click="link(value.id, value.linkUrl)" |
||||
class="noticeitems" |
||||
v-for="value in columnData" |
||||
:key="value.id" |
||||
> |
||||
<img :src="value.bgImgUrl" alt="" /> |
||||
<div class="detail"> |
||||
<h3>{{ value.title }}</h3> |
||||
<p> |
||||
{{ value.description }} |
||||
</p> |
||||
<span>{{ value.createTime }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="titlebottomtwo" |
||||
v-if=" |
||||
(showType == 0 && $store.state.columnmessage.data.length > 1) || |
||||
(showType == 0 && $store.state.columnmessage.styleType == 2) |
||||
" |
||||
> |
||||
<div class="title"> |
||||
<span>{{ this.$store.state.columnmessage.columnName }}</span> |
||||
</div> |
||||
<div |
||||
@click="link(value.id, value.linkUrl)" |
||||
:to="path + value.id" |
||||
v-for="value in columnData" |
||||
:key="value.id" |
||||
> |
||||
<div class="teachershow"> |
||||
<img :src="value.bgImgUrl" alt="" /> |
||||
<div> |
||||
<P class="name">{{ value.title }}</P> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-pagination |
||||
@current-change="handleCurrentChange" |
||||
:current-page="currentPage" |
||||
:page-size="10" |
||||
background |
||||
layout="prev, pager, next" |
||||
:total="this.$store.state.columnmessage.total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getColumnarticle } from "@/apis/request.js"; |
||||
import { getArticlemessage } from "@/apis/request.js"; |
||||
import { returnColumn } from "@/apis/request.js"; |
||||
// import Description from "./Description.vue"; |
||||
|
||||
import { allColumn } from "@/apis/request.js"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
currentPage: 1, |
||||
total: 50, |
||||
flag: false, |
||||
arrData: [], |
||||
}; |
||||
}, |
||||
components: { |
||||
// Description |
||||
}, |
||||
methods: { |
||||
link(id, url) { |
||||
if ( |
||||
this.$store.state.columnmessage.styleType == 0 || |
||||
this.$store.state.columnmessage.styleType == 1 |
||||
) { |
||||
this.$router.push({ |
||||
path: |
||||
"/ChuanDa/" + |
||||
this.$store.state.columnmessage.id + |
||||
"/leftmenu/" + |
||||
this.$store.state.bottomcolumnid + |
||||
"/description/" + |
||||
id, |
||||
}); |
||||
} else { |
||||
getArticlemessage(id).then((res) => { |
||||
if (res[0].linkType == 1) { |
||||
location.href = url; |
||||
} else { |
||||
allColumn().then((data) => { |
||||
var a = this.familyTree(data, res[0].linkColumnId).length - 1; |
||||
var id = this.familyTree(data, res[0].linkColumnId)[a].id; |
||||
for (let i = 0; i < data.length; i++) { |
||||
if (data[i].id == res[0].linkColumnId) { |
||||
this.flag = true; |
||||
const { href } = this.$router.resolve({ |
||||
path: |
||||
"/ChuanDa/" + |
||||
res[0].linkColumnId + |
||||
"/leftmenu/" + |
||||
0 + |
||||
"/description/" + |
||||
res[0].linkArticleId, |
||||
}); |
||||
if (this.$store.state.columnmessage.openMethod == 1) { |
||||
returnColumn(res[0].linkColumnId).then((res) => { |
||||
this.$store.state.columnmessage.styleType = |
||||
res[0].styleType; |
||||
localStorage.setItem( |
||||
"styleType", |
||||
this.$store.state.columnmessage.styleType |
||||
); |
||||
// localStorage.removeItem('styleType') |
||||
console.log( |
||||
this.$store.state.columnmessage.styleType, |
||||
"con" |
||||
); |
||||
window.open(href, "_blank"); |
||||
}); |
||||
} else { |
||||
returnColumn(res[0].linkColumnId).then((res) => { |
||||
this.$store.state.columnmessage.styleType = |
||||
res[0].styleType; |
||||
console.log( |
||||
this.$store.state.columnmessage.styleType, |
||||
"con" |
||||
); |
||||
window.open(href, "_self"); |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
if (this.flag == false) { |
||||
console.log(res, "o"); |
||||
const { href } = this.$router.resolve({ |
||||
path: `/ChuanDa/${id}/leftmenu/${res[0].linkColumnId}/description/${res[0].linkArticleId}`, |
||||
}); |
||||
if (this.$store.state.columnmessage.openMethod == 1) { |
||||
localStorage.setItem( |
||||
"styleType", |
||||
this.$store.state.columnmessage.styleType |
||||
); |
||||
window.open(href, "_blank"); |
||||
console.log( |
||||
this.$store.state.columnmessage.styleType, |
||||
"con1" |
||||
); |
||||
} else { |
||||
console.log( |
||||
this.$store.state.columnmessage.styleType, |
||||
"con2" |
||||
); |
||||
window.open(href, "_self"); |
||||
} |
||||
|
||||
console.log(this.$store.state.columnmessage.id, 1); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
familyTree(arr1, id) { |
||||
var temp = []; |
||||
var forFn = function (arr, id) { |
||||
for (var i = 0; i < arr.length; i++) { |
||||
var item = arr[i]; |
||||
if (item.id === id) { |
||||
temp.push(item); |
||||
forFn(arr1, item.parentId); |
||||
break; |
||||
} else { |
||||
if (item.children) { |
||||
forFn(item.children, id); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
forFn(arr1, id); |
||||
return temp; |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.currentPage = val; |
||||
this.querystock(); |
||||
}, |
||||
querystock() { |
||||
if (this.$route.params.a != 0) { |
||||
getColumnarticle(this.$route.params.a, this.currentPage).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
console.log(res, 666); |
||||
}); |
||||
} else { |
||||
getColumnarticle( |
||||
this.$store.state.columnmessage.id, |
||||
this.currentPage |
||||
).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
console.log(res, 666); |
||||
}); |
||||
} |
||||
}, |
||||
|
||||
getParentNode(data, nodeId, arrRes) { |
||||
if (!data) { |
||||
if (!nodeId) { |
||||
arrRes.unshift(nodeId); |
||||
} |
||||
return arrRes; |
||||
} |
||||
for (var i = 0, length = data.length; i < length; i++) { |
||||
let node = data[i]; |
||||
if (node.value == nodeId) { |
||||
arrRes.unshift(nodeId); |
||||
this.getParentNode(this.arrData, node.parentId, arrRes); |
||||
break; |
||||
} else { |
||||
if (node.children) { |
||||
this.getParentNode(node.children, nodeId, arrRes); |
||||
} |
||||
} |
||||
} |
||||
return arrRes; |
||||
}, |
||||
}, |
||||
computed: { |
||||
showType() { |
||||
if ( |
||||
this.$store.state.columnmessage.showType == 0 || |
||||
this.$store.state.columnmessage.showType == 1 |
||||
) { |
||||
return this.$store.state.columnmessage.showType; |
||||
} else { |
||||
return ""; |
||||
} |
||||
}, |
||||
columnData() { |
||||
if (this.$store.state.columnmessage.data.length > 0) { |
||||
return this.$store.state.columnmessage.data; |
||||
} else { |
||||
return []; |
||||
} |
||||
}, |
||||
columnName() { |
||||
if (this.$store.state.columnmessage.columnName) { |
||||
return this.$store.state.columnmessage.columnName; |
||||
} else { |
||||
return ""; |
||||
} |
||||
}, |
||||
path() { |
||||
return "/ChuanDa/" + this.$store.state.columnmessage.id + "/description/"; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.newsnotice { |
||||
width: 980px; |
||||
float: right; |
||||
|
||||
.title { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
font-size: 18px; |
||||
padding-bottom: 10px; |
||||
padding-top: 26px; |
||||
border-bottom: 2px solid #ccc; |
||||
color: #2d2d2d; |
||||
font-size: 18px; |
||||
a { |
||||
color: #2d2d2d; |
||||
} |
||||
} |
||||
.titlebottomone { |
||||
.noticeitems { |
||||
display: flex; |
||||
margin-top: 30px; |
||||
height: 100px; |
||||
img { |
||||
height: 100%; |
||||
width: 160px; |
||||
} |
||||
.detail { |
||||
flex: 1; |
||||
padding-left: 20px; |
||||
padding-top: 10px; |
||||
background: rgb(230, 227, 227); |
||||
position: relative; |
||||
h3 { |
||||
font-size: 18px; |
||||
color: #2d2d2d; |
||||
} |
||||
p { |
||||
width: 600px; |
||||
margin-top: 10px; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
font-size: 16px; |
||||
color: #2d2d2d; |
||||
} |
||||
span { |
||||
position: absolute; |
||||
right: 10px; |
||||
bottom: 10px; |
||||
color: #999; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
transition: 1s; |
||||
} |
||||
.noticeitems:hover { |
||||
transform: scale(1.02); |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.titlebottomtwo { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
.teachershow { |
||||
display: flex; |
||||
margin-top: 30px; |
||||
img { |
||||
width: 260px; |
||||
height: 118px; |
||||
} |
||||
div { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
box-shadow: 5px 3px 10px #dee4ea; |
||||
width: 180px; |
||||
margin-right: 20px; |
||||
padding: 0px 15px; |
||||
color: #2d2d2d; |
||||
.name { |
||||
font-size: 16px; |
||||
color: #333333; |
||||
} |
||||
} |
||||
} |
||||
.teachershow:hover { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.el-pagination { |
||||
width: 200px; |
||||
|
||||
margin: 180px auto; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,255 @@ |
||||
<template> |
||||
<div> |
||||
<div |
||||
class="centeritemdetailtwo" |
||||
v-if="this.$store.state.columnmessage.styleType == 1" |
||||
> |
||||
<div |
||||
class="title" |
||||
v-if="this.$store.state.columnmessage.data.length != 1" |
||||
> |
||||
<span class="link" @click="route">< 返回</span> |
||||
</div> |
||||
|
||||
<div class="titlebottom"> |
||||
<!-- 标题 --> |
||||
<h3 style="font-size: 22px;font-weight: bold;">{{ article.title }}</h3> |
||||
<!-- 文章内容 --> |
||||
<div v-html="article.textContent"></div> |
||||
<!-- 时间 --> |
||||
<p class="time">{{ article.createTime }}</p> |
||||
</div> |
||||
</div> |
||||
<!-- styleType为0时为一级栏目内容，没有返回选项 --> |
||||
<div |
||||
class="centeritemdetailone" |
||||
v-if="this.$store.state.columnmessage.styleType == 0" |
||||
> |
||||
<!-- styleType为1时为一级栏目内容，有返回选项 --> |
||||
<!-- 栏目深度 --> |
||||
<div |
||||
class="title" |
||||
v-if="this.$store.state.columnmessage.data.length != 1" |
||||
> |
||||
<!-- @click="$router.go(-1)"也可以实现返回上一级 --> |
||||
<span class="link" @click="route">< 返回</span> |
||||
</div> |
||||
<div class="titlebottom"> |
||||
<div class="input_video"> |
||||
<video-player |
||||
class="video-player vjs-custom-skin" |
||||
ref="videoPlayer" |
||||
:playsinline="true" |
||||
:options="playerOptions" |
||||
></video-player> |
||||
</div> |
||||
<h3>{{ article.title }}</h3> |
||||
<div class="content" v-html="article.textContent"></div> |
||||
<p class="time">{{ article.createTime }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getArticlemessage } from "@/apis/request.js"; |
||||
import { returnColumn } from "@/apis/request.js"; |
||||
import { getColumnarticle } from "@/apis/request.js"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
article: {}, |
||||
playerOptions: { |
||||
playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度 |
||||
autoplay: false, //如果true,浏览器准备好时开始回放。 |
||||
muted: false, // 默认情况下将会消除任何音频。 |
||||
loop: false, // 视频一结束就重新开始。 |
||||
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） |
||||
language: "zh-CN", |
||||
aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） |
||||
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 |
||||
sources: [ |
||||
{ |
||||
type: "", |
||||
src: "1.mp4", //url地址 |
||||
}, |
||||
], |
||||
poster: "", //你的封面地址 |
||||
// width: document.documentElement.clientWidth, |
||||
notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。 |
||||
controlBar: { |
||||
timeDivider: true, //当前时间和持续时间的分隔符 |
||||
durationDisplay: true, //显示持续时间 |
||||
remainingTimeDisplay: false, //是否显示剩余时间功能 |
||||
fullscreenToggle: true, //全屏按钮 |
||||
}, |
||||
}, |
||||
}; |
||||
}, |
||||
methods: { |
||||
route() { |
||||
console.log(this.$store.state.bottomcolumnid, 7); |
||||
this.$router.push({ |
||||
path:`/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}` |
||||
}); |
||||
}, |
||||
}, |
||||
computed: { |
||||
//0为一级栏目内容，1为二级栏目内容，及根据左侧获得的styleType为0，根据内容栏目进入的styleType为1 |
||||
styleType() { |
||||
if ( |
||||
this.$store.state.columnmessage.styleType == 0 || |
||||
this.$store.state.columnmessage.styleType == 1 |
||||
) { |
||||
return this.$store.state.columnmessage.styleType; |
||||
} else { |
||||
return 0; |
||||
} |
||||
}, |
||||
}, |
||||
created() { |
||||
if (localStorage.getItem("styleType")) { |
||||
this.$store.state.columnmessage.styleType = localStorage.getItem("styleType"); |
||||
localStorage.removeItem("styleType"); |
||||
} |
||||
|
||||
this.$store.state.columnmessage.id = this.$route.params.id; |
||||
getArticlemessage(this.$route.params.b).then((res) => {//获取栏目文章 |
||||
|
||||
this.article = res[0];//获取文章并赋值 |
||||
this.playerOptions.sources = res[0].videoUrl;//获取视频地址url |
||||
returnColumn(res[0].columnId).then((res) => { |
||||
|
||||
this.$store.state.columnmessage.styleType = res[0].styleType;//是否选中 |
||||
this.$store.state.columnmessage.showType = res[0].showType;//是否显示 |
||||
this.$store.state.columnmessage.columnName = res[0].columnName;//二级左侧栏目名 |
||||
console.log(this.$store.state.columnmessage.styleType, 3); |
||||
}); |
||||
getColumnarticle(res[0].columnId, 1).then((res) => {//查看该栏目下的文章详情 |
||||
|
||||
this.$store.state.columnmessage.data = res.list;//文章内容 |
||||
this.$store.state.columnmessage.total = res.total;//文章篇数 |
||||
}); |
||||
}); |
||||
console.log(this.$store.state.columnmessage.styleType, "ply2"); |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.centeritemdetailone { |
||||
width: 980px; |
||||
float: right; |
||||
.title { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
font-size: 18px; |
||||
padding-bottom: 10px; |
||||
padding-top: 26px; |
||||
border-bottom: 2px solid #ccc; |
||||
font-size: 18px; |
||||
color: #2d2d2d; |
||||
span { |
||||
color: #2d2d2d; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.titlebottom { |
||||
padding-top: 30px; |
||||
h3 { |
||||
text-align: center; |
||||
} |
||||
.content { |
||||
margin-top: 20px; |
||||
display: -webkit-box; |
||||
overflow: hidden; |
||||
white-space: normal !important; |
||||
text-overflow: ellipsis; |
||||
word-wrap: break-word; |
||||
-webkit-line-clamp: 11; |
||||
-webkit-box-orient: vertical; |
||||
font-size: 16px; |
||||
color: #2d2d2d; |
||||
line-height: 40px; |
||||
text-indent: 2em; |
||||
} |
||||
.time { |
||||
text-align: right; |
||||
margin-top: 20px; |
||||
color: #999; |
||||
} |
||||
.input_video { |
||||
width: 100%; |
||||
height: 476px; |
||||
background: url("../assets/images/video_bg.jpg"); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
margin-bottom: 60px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.input_video .video-player { |
||||
height: 426px; |
||||
width: 756px; |
||||
} |
||||
} |
||||
.video-js .vjs-big-play-button { |
||||
width: 80px; |
||||
border-radius: 50%; |
||||
outline: none; |
||||
} |
||||
.video-js:focus { |
||||
outline: none; |
||||
} |
||||
margin-bottom: 140px; |
||||
} |
||||
.centeritemdetailtwo { |
||||
overflow: hidden; |
||||
width: 980px; |
||||
float: right; |
||||
.title { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
font-size: 18px; |
||||
padding-bottom: 10px; |
||||
padding-top: 26px; |
||||
border-bottom: 2px solid #ccc; |
||||
color: #2d2d2d; |
||||
font-size: 18px; |
||||
span { |
||||
color: #2d2d2d; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.titlebottom { |
||||
padding-top: 30px; |
||||
h3 { |
||||
text-align: center; |
||||
} |
||||
div { |
||||
margin-top: 20px; |
||||
display: -webkit-box; |
||||
overflow: hidden; |
||||
white-space: normal !important; |
||||
text-overflow: ellipsis; |
||||
word-wrap: break-word; |
||||
//-webkit-line-clamp: 15; |
||||
-webkit-box-orient: vertical; |
||||
font-size: 16px; |
||||
color: #2d2d2d; |
||||
line-height: 40px; |
||||
text-indent: 2em; |
||||
} |
||||
.ql-align-center{ |
||||
text-align: center; |
||||
} |
||||
.time { |
||||
text-align: right; |
||||
margin-top: 50px; |
||||
color: #999; |
||||
} |
||||
} |
||||
margin-bottom: 200px; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,297 @@ |
||||
<template> |
||||
<div> |
||||
<Home v-if=" this.$route.params.id==66&&this.$store.state.columnmessage.data==''"/> |
||||
<div v-else> |
||||
<img |
||||
:src="this.$store.state.columnmessage.bgImgUrl" |
||||
alt="" |
||||
class="banner" |
||||
/> |
||||
<div class="container clearfix"> |
||||
<!-- <li class="leftmenutop" v-if="id"> |
||||
<p>{{ id}}</p> |
||||
</li> --> |
||||
<el-menu |
||||
v-if="listData.length > 0" |
||||
unique-opened |
||||
|
||||
:default-active="$route.params.a" |
||||
class="el-menu-vertical-demo" |
||||
background-color="#f3f3f3" |
||||
text-color="#000" |
||||
active-text-color="#fff" |
||||
@open="handleOpen" |
||||
@close="handleClose" |
||||
> |
||||
<Child :dataList="listData"></Child> |
||||
</el-menu> |
||||
|
||||
<router-view /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
import { getColumnarticle } from "@/apis/request.js"; |
||||
import { getColumnchildren } from "@/apis/request.js"; |
||||
import { returnColumn } from "@/apis/request.js"; |
||||
import Child from "@/components/Childmenu.vue"; |
||||
import Home from "@/views/Home.vue"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: "", |
||||
path: "", |
||||
bgImgUrl: "", |
||||
listData: [], |
||||
columnmessage: { |
||||
data: [], |
||||
showType: 0, |
||||
styleType: 0, |
||||
}, |
||||
}; |
||||
}, |
||||
components: { |
||||
Child, |
||||
Home |
||||
// Contain, |
||||
}, |
||||
methods: { |
||||
handleOpen(key) { |
||||
this.$store.state.bottomcolumnid = key; |
||||
this.$router.push({ |
||||
path: |
||||
"/ChuanDa/" + this.$store.state.columnmessage.id + "/leftmenu/" + key, |
||||
}); |
||||
getColumnarticle(key, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(key).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
console.log(this.$store.state.columnmessage.styleType, 0); |
||||
}); |
||||
}, |
||||
handleClose(key) { |
||||
this.$store.state.bottomcolumnid = key; |
||||
this.$router.push({ |
||||
path: |
||||
"/ChuanDa/" + this.$store.state.columnmessage.id + "/leftmenu/" + key, |
||||
}); |
||||
getColumnarticle(key, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(key).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
|
||||
}); |
||||
}, |
||||
}, |
||||
|
||||
watch: { |
||||
$route(to) { |
||||
// console.log('变化1') |
||||
if (to.path.indexOf("/leftmenu/0") > -1) { |
||||
console.log("变化1"); |
||||
this.id = this.$route.params.id; |
||||
this.path = this.$route.path; |
||||
getColumnchildren(this.id).then((res) => { |
||||
this.listData = JSON.parse(JSON.stringify(res)); |
||||
if (res.length == 0) { |
||||
this.$store.state.bottomcolumnid = 0; |
||||
getColumnarticle(this.id, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(this.id).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$store.state.columnmessage.id = res[0].id; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
}); |
||||
} else { |
||||
this.$store.state.bottomcolumnid = res[0].id; |
||||
this.listData.unshift({ |
||||
columnName: this.$store.state.columnmessage.topColumnname, |
||||
children: [], |
||||
id: -1, |
||||
}); |
||||
getColumnarticle(res[0].id, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(res[0].id).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$router.push({ |
||||
path: `/ChuanDa/` + this.id + "/leftmenu/" + res[0].id, |
||||
}); |
||||
}); |
||||
} |
||||
}); |
||||
} else { |
||||
console.log('变化2') |
||||
getColumnarticle(this.$route.params.a, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(this.$route.params.a).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
created() { |
||||
console.log('变化3') |
||||
this.$store.state.bgImgUrl = null; |
||||
this.id = this.$route.params.id; |
||||
this.$store.state.columnmessage.id = this.$route.params.id; |
||||
this.path = this.$route.path; |
||||
getColumnchildren(this.id).then((res) => { |
||||
this.listData = res; |
||||
if (res.length == 0) { |
||||
this.$store.state.bottomcolumnid = 0; |
||||
getColumnarticle(this.id, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
returnColumn(this.id).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.id = res[0].id; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
console.log(this.$store.state.columnmessage.styleType, 1); |
||||
if (this.$route.params.a != 0) { |
||||
this.$store.state.bottomcolumnid = this.$route.params.a; |
||||
|
||||
returnColumn(this.$route.params.a).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
console.log(this.$store.state.columnmessage.styleType, 2); |
||||
}); |
||||
getColumnarticle(this.$route.params.a, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
} |
||||
else { |
||||
console.log('a') |
||||
this.$store.state.bottomcolumnid = res[0].id; |
||||
returnColumn(this.id).then((res) => { |
||||
this.$store.state.columnmessage.topColumnname = res[0].columnName; |
||||
this.listData.unshift({ |
||||
columnName: this.$store.state.columnmessage.topColumnname, |
||||
children: [], |
||||
id: -1, |
||||
}); |
||||
}); |
||||
if (this.$route.params.a != 0) { |
||||
console.log('b') |
||||
this.$store.state.bottomcolumnid = this.$route.params.a; |
||||
getColumnarticle(this.$route.params.a, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
returnColumn(this.$route.params.a).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
console.log( this.$store.state.columnmessage.styleType,'styleType1') |
||||
}); |
||||
}); |
||||
} else { |
||||
if (this.$route.params.b != undefined) { |
||||
returnColumn(this.$route.params.id).then((res) => { |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
console.log(res[0].bgImgUrl, 3); |
||||
}); |
||||
console.log('c') |
||||
return false; |
||||
} |
||||
console.log('d') |
||||
this.$router.push({ |
||||
path: `/ChuanDa/` + this.id + "/leftmenu/" + res[0].id, |
||||
}); |
||||
getColumnarticle(res[0].id, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(res[0].id).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
mounted() {}, |
||||
computed: {}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.banner { |
||||
display: block; |
||||
width: 100%; |
||||
height: 170px; |
||||
} |
||||
.el-menu { |
||||
text-align: center; |
||||
width: 200px; |
||||
border-right: 0px; |
||||
float: left; |
||||
.leftmenutop { |
||||
line-height: 51px; |
||||
width: 180px; |
||||
padding-left: 10px; |
||||
padding-right: 10px; |
||||
margin-bottom: 10px; |
||||
font-size: 18px; |
||||
p { |
||||
border-bottom: 2px solid #ccc; |
||||
} |
||||
} |
||||
.el-menu-item { |
||||
font-size: 16px; |
||||
} |
||||
.el-submenu { |
||||
.el-submenu__title { |
||||
span { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,400 @@ |
||||
<template> |
||||
<!-- 如果id为66则显示首页，否则显示有侧边栏的页面 --> |
||||
<div> |
||||
<Home |
||||
v-if=" |
||||
this.$route.params.id == 66 && |
||||
this.$store.state.columnmessage.data == '' |
||||
" |
||||
/> |
||||
<div v-else class="location"> |
||||
<img |
||||
:src="this.$store.state.columnmessage.bgImgUrl" |
||||
alt="" |
||||
class="banner" |
||||
/> |
||||
<!-- 顶部展示图片横幅 --> |
||||
<div class="bannertitle"> |
||||
<p>{{ this.$store.state.columnmessage.TopColumnname }}</p> |
||||
<p class="english">{{ this.$store.state.columnmessage.english }}</p> |
||||
</div> |
||||
<div class="container clearfix"> |
||||
<!-- <li class="leftmenutop" v-if="id"> |
||||
<p>{{ id}}</p> |
||||
</li> --> |
||||
<!-- 栏目左侧导航栏 --> |
||||
<el-menu |
||||
v-if="listData.length > 0" |
||||
unique-opened |
||||
:default-active="$route.params.a" |
||||
class="el-menu-vertical-demo" |
||||
background-color="#f3f3f3" |
||||
text-color="#000" |
||||
active-text-color="#fff" |
||||
@open="handleOpen" |
||||
@close="handleClose" |
||||
> |
||||
<!-- 侧边栏目的具体栏目child --> |
||||
<Child :dataList="listData"></Child> |
||||
</el-menu> |
||||
|
||||
<router-view /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getColumnarticle } from "@/apis/request.js"; |
||||
import { getColumnchildren } from "@/apis/request.js"; |
||||
import { returnColumn } from "@/apis/request.js"; |
||||
import Child from "@/components/Childmenu.vue"; |
||||
import Home from "@/views/Home.vue"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: 0, |
||||
path: "", |
||||
bgImgUrl: "", |
||||
listData: [], |
||||
columnmessage: { |
||||
data: [], |
||||
showType: 0, |
||||
styleType: 0, |
||||
}, |
||||
}; |
||||
}, |
||||
components: { |
||||
Child, //侧边栏目 |
||||
Home, //首页 |
||||
}, |
||||
methods: { |
||||
handleOpen(key) { |
||||
console.log("key=>", key); |
||||
this.$store.state.bottomcolumnid = key; |
||||
this.$router.push({ |
||||
path: |
||||
"/ChuanDa/" + this.$store.state.columnmessage.id + "/leftmenu/" + key, |
||||
}); |
||||
getColumnarticle(key, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(key).then((res) => { |
||||
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
// this.$store.state.columnmessage.english = res[0].english; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
console.log(this.$store.state.columnmessage.styleType, 0); |
||||
}); |
||||
}, |
||||
handleClose(key) { |
||||
this.$store.state.bottomcolumnid = key; |
||||
this.$router.push({ |
||||
path: |
||||
"/ChuanDa/" + this.$store.state.columnmessage.id + "/leftmenu/" + key, |
||||
}); |
||||
getColumnarticle(key, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(key).then((res) => { |
||||
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
// this.$store.state.columnmessage.english = res[0].english; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
}); |
||||
}, |
||||
}, |
||||
|
||||
watch: { |
||||
$route(to) { |
||||
// console.log('变化1') |
||||
if (to.path.indexOf("/leftmenu/0") > -1) { |
||||
console.log("变化1"); |
||||
this.id = this.$route.params.id; |
||||
this.path = this.$route.path; |
||||
getColumnchildren(this.id).then((res) => { |
||||
console.log("res=>", res); |
||||
this.listData = JSON.parse(JSON.stringify(res)); |
||||
if (res.length == 0) { |
||||
this.$store.state.bottomcolumnid = 0; |
||||
getColumnarticle(this.id, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
returnColumn(this.id).then((data) => { |
||||
if (res.list.length == 1 && data[0].styleType != 2) { |
||||
let id = res.list[0].id; |
||||
this.$router.push({ |
||||
path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`, |
||||
}); |
||||
} |
||||
}); |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(this.$route.params.id).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$store.state.columnmessage.english = res[0].english; |
||||
this.$store.state.columnmessage.TopColumnname = res[0].columnName; //顶部名称 |
||||
|
||||
this.$store.state.columnmessage.id = res[0].id; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
}); |
||||
} else { |
||||
returnColumn(this.$route.params.id).then((res) => { |
||||
console.log(res,555) |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.TopColumnname = res[0].columnName; |
||||
this.$store.state.columnmessage.english = res[0].english; |
||||
// this.listData.unshift({ |
||||
// columnName: this.$store.state.columnmessage.TopColumnname, |
||||
// children: [], |
||||
// id: -1, |
||||
// }); |
||||
}); |
||||
this.$store.state.bottomcolumnid = res[0].id; |
||||
|
||||
|
||||
getColumnarticle(res[0].id, 1).then((res) => { |
||||
console.log("数=>",res) |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
// returnColumn(res[0].id).then((res) => { |
||||
// if (res[0].list.length == 1 && res[0].styleType != 2) { |
||||
// let id = res.list[0].id; |
||||
// this.$router.push({ |
||||
// path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`, |
||||
// }); |
||||
// } |
||||
// }); |
||||
}); |
||||
returnColumn(res[0].id).then((res) => { |
||||
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
// this.$store.state.columnmessage.english = res[0].english; |
||||
this.$router.push({ |
||||
path: `/ChuanDa/` + this.id + "/leftmenu/" + res[0].id, |
||||
}); |
||||
}); |
||||
} |
||||
}); |
||||
} else { |
||||
getColumnarticle(this.$route.params.a, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
returnColumn(this.$route.params.a).then((data) => { |
||||
if (res.list.length == 1 && data[0].styleType != 2) { |
||||
let id = res.list[0].id; |
||||
this.$router.push({ |
||||
path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`, |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
returnColumn(this.$route.params.id).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.TopColumnname = res[0].columnName; |
||||
this.$store.state.columnmessage.english = res[0].english; |
||||
}); |
||||
returnColumn(this.$route.params.a).then((res) => { |
||||
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
// this.$store.state.columnmessage.english = res[0].english; |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
created() { |
||||
console.log("变化3"); |
||||
this.$store.state.bgImgUrl = null; |
||||
this.id = this.$route.params.id; |
||||
this.$store.state.columnmessage.id = this.$route.params.id; |
||||
this.path = this.$route.path; |
||||
getColumnchildren(this.id).then((res) => { |
||||
this.listData = res; |
||||
if (res.length == 0) { |
||||
this.$store.state.bottomcolumnid = 0; |
||||
getColumnarticle(this.id, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
returnColumn(this.id).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
this.$store.state.columnmessage.TopColumnname = res[0].columnName; |
||||
this.$store.state.columnmessage.english = res[0].english; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.id = res[0].id; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
console.log(this.$store.state.columnmessage.styleType, 1); |
||||
if ( |
||||
this.$store.state.columnmessage.data.length == 1 && |
||||
res[0].styleType != 2 |
||||
) { |
||||
let id = this.$store.state.columnmessage.data[0].id; |
||||
this.$router.push({ |
||||
path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`, |
||||
}); |
||||
} |
||||
if (this.$route.params.a != 0) { |
||||
this.$store.state.bottomcolumnid = this.$route.params.a; |
||||
returnColumn(this.$route.params.a).then((res) => { |
||||
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
// this.$store.state.columnmessage.english = res[0].english; |
||||
}); |
||||
getColumnarticle(this.$route.params.a, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
} else { |
||||
// console.log("a"); |
||||
this.$store.state.bottomcolumnid = res[0].id; |
||||
returnColumn(this.id).then((res) => { |
||||
this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.TopColumnname = res[0].columnName; |
||||
this.$store.state.columnmessage.english = res[0].english; |
||||
// this.listData.unshift({ |
||||
// columnName: this.$store.state.columnmessage.TopColumnname, |
||||
// children: [], |
||||
// id: -1, |
||||
// }); |
||||
console.log("数据=>",this.listData) |
||||
}); |
||||
if (this.$route.params.a != 0) { |
||||
// console.log("b"); |
||||
this.$store.state.bottomcolumnid = this.$route.params.a; |
||||
getColumnarticle(this.$route.params.a, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
returnColumn(this.$route.params.a).then((data) => { |
||||
// this.$store.state.columnmessage.bgImgUrl = data[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = data[0].showType; |
||||
this.$store.state.columnmessage.openMethod = data[0].openMethod; |
||||
this.$store.state.columnmessage.styleType = data[0].styleType; |
||||
this.$store.state.columnmessage.columnName = data[0].columnName; |
||||
// this.$store.state.columnmessage.english = data[0].english; |
||||
if (res.list.length == 1 && data[0].styleType != 2) { |
||||
let id = res.list[0].id; |
||||
this.$router.push({ |
||||
path: `/ChuanDa/${this.$store.state.columnmessage.id}/leftmenu/${this.$store.state.bottomcolumnid}/description/${id}`, |
||||
}); |
||||
} |
||||
console.log(data, 666); |
||||
console.log( |
||||
this.$store.state.columnmessage.styleType, |
||||
"styleType1" |
||||
); |
||||
}); |
||||
}); |
||||
} else { |
||||
if (this.$route.params.b != undefined) { |
||||
returnColumn(this.$route.params.id).then((res) => { |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
console.log(res[0].bgImgUrl, 3); |
||||
}); |
||||
// console.log("c"); |
||||
return false; |
||||
} |
||||
console.log("d"); |
||||
this.$router.push({ |
||||
path: `/ChuanDa/` + this.id + "/leftmenu/" + res[0].id, |
||||
}); |
||||
getColumnarticle(res[0].id, 1).then((res) => { |
||||
this.$store.state.columnmessage.data = res.list; |
||||
this.$store.state.columnmessage.total = res.total; |
||||
}); |
||||
returnColumn(res[0].id).then((res) => { |
||||
// this.$store.state.columnmessage.bgImgUrl = res[0].bgImgUrl; |
||||
this.$store.state.columnmessage.showType = res[0].showType; |
||||
this.$store.state.columnmessage.openMethod = res[0].openMethod; |
||||
this.$store.state.columnmessage.styleType = res[0].styleType; |
||||
this.$store.state.columnmessage.columnName = res[0].columnName; |
||||
// this.$store.state.columnmessage.english = res[0].english; |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
computed: {}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.banner { |
||||
// display: block; |
||||
width: 100%; |
||||
height: 180px; |
||||
|
||||
.location { |
||||
position: relative; |
||||
} |
||||
} |
||||
.bannertitle { |
||||
width: 445px; |
||||
height: 151px; |
||||
background: #409eff; |
||||
opacity: 0.8; |
||||
position: absolute; |
||||
right: 46px; |
||||
top: 99px; |
||||
font-size: 36px; |
||||
color: #fff; |
||||
text-align: center; |
||||
.english { |
||||
font-size: 30px; |
||||
text-transform: uppercase; |
||||
} |
||||
p { |
||||
margin-top: 20px; |
||||
} |
||||
} |
||||
.el-menu { |
||||
text-align: center; |
||||
width: 200px; |
||||
border-right: 0px; |
||||
float: left; |
||||
.leftmenutop { |
||||
line-height: 51px; |
||||
width: 180px; |
||||
padding-left: 10px; |
||||
padding-right: 10px; |
||||
margin-bottom: 10px; |
||||
font-size: 18px; |
||||
p { |
||||
border-bottom: 2px solid #ccc; |
||||
} |
||||
} |
||||
.el-menu-item { |
||||
font-size: 16px; |
||||
} |
||||
.el-submenu { |
||||
.el-submenu__title { |
||||
span { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,190 @@ |
||||
<template> |
||||
<div class="login" :style="{backgroundImage:'url('+imgUrl+')'}"> |
||||
|
||||
<div class="back"> |
||||
<Topbar></Topbar> |
||||
<div class="container loginform"> |
||||
<div class="photo"> |
||||
<img src="../assets/images/logo.png" alt=""> |
||||
<p>跨国投资汇率风险管理</p> |
||||
<p>虚拟仿真实验项目</p> |
||||
</div> |
||||
<div class="form"> |
||||
<p class="top">系统登录</p> |
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm"> |
||||
<p class="name">用户名</p> |
||||
<el-form-item prop="name"> |
||||
<el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input> |
||||
</el-form-item> |
||||
<p class="password">密码</p> |
||||
<el-form-item prop="password"> |
||||
<el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input> |
||||
</el-form-item> |
||||
<div class="resit"><span>注册</span><span>忘记密码?</span></div> |
||||
<el-form-item> |
||||
<button @click="submitForm('ruleForm')">登录</button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="select"> |
||||
<button class="expert">专家通道</button> |
||||
<button class="prepare">实验前预习</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Topbar from "@/components/Topbar.vue"; |
||||
export default { |
||||
components: { |
||||
Topbar, |
||||
}, |
||||
data() { |
||||
return { |
||||
imgUrl:require("../assets/images/8.jpg"), |
||||
ruleForm: { |
||||
name: '', |
||||
password:"" |
||||
}, |
||||
rules: { |
||||
name: [ |
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }, |
||||
], |
||||
password: [ |
||||
{ required: true, message: '请输入密码', trigger: 'blur' }, |
||||
], |
||||
|
||||
} |
||||
}; |
||||
}, |
||||
methods: { |
||||
submitForm(formName) { |
||||
this.$refs[formName].validate((valid) => { |
||||
if (valid) { |
||||
alert('submit!'); |
||||
} else { |
||||
console.log('error submit!!'); |
||||
return false; |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
created(){ |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.login{ |
||||
position: relative; |
||||
|
||||
width: 100%; |
||||
height: 100%; |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
.loginform{ |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.photo{ |
||||
width: 500px; |
||||
padding-right: 90px; |
||||
border-right: 1px solid #fff; |
||||
img{ |
||||
width: 500px; |
||||
height: 130px; |
||||
} |
||||
p{ |
||||
font-size: 40px ; |
||||
color: #fff; |
||||
margin-top: 10px; |
||||
font-family: 'Source Han Serif CN'; |
||||
} |
||||
} |
||||
.form{ |
||||
width: 520px; |
||||
height: 600px; |
||||
background:#fff; |
||||
font-family: 'Source Han Serif CN'; |
||||
p{ |
||||
text-indent: 50px; |
||||
color: #ccc; |
||||
} |
||||
.top{ |
||||
margin-top: 30px; |
||||
font-size: 24px; |
||||
color: #2d2d2d; |
||||
} |
||||
.name{ |
||||
margin-top: 40px; |
||||
margin-bottom: 10px; |
||||
} |
||||
.password{ |
||||
margin-top: 30px; |
||||
margin-bottom: 10px; |
||||
} |
||||
.el-input__inner{ |
||||
width: 420px; |
||||
} |
||||
.resit{ |
||||
width: 420px; |
||||
margin: 0 auto; |
||||
margin-top: 10px; |
||||
margin-bottom: 70px; |
||||
color: #bb2b17; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.el-form-item button{ |
||||
width: 420px; |
||||
background: #bb2b17; |
||||
border: none; |
||||
outline: none; |
||||
height: 60px; |
||||
color: #fff; |
||||
border-radius: 8px; |
||||
margin-bottom: 30px; |
||||
font-size: 18px; |
||||
} |
||||
.select{ |
||||
width: 420px; |
||||
margin: 0 auto; |
||||
display: flex; |
||||
justify-content: center; |
||||
button{ |
||||
width: 126px; |
||||
height: 60px; |
||||
border: none; |
||||
border-radius: 6px; |
||||
outline: none; |
||||
margin-right: 10px; |
||||
} |
||||
.expert{ |
||||
color: #fff; |
||||
background: rgba(0, 0, 0, 0.856); |
||||
} |
||||
.prepare{ |
||||
color: #bb2b17; |
||||
background: #fff; |
||||
border: 1px solid #bb2b17; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.back { |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(75, 70, 70, 0.7); |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,19 @@ |
||||
<template> |
||||
<div> |
||||
<h3>404 Not Found</h3> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
h3{ |
||||
height: 1000px; |
||||
font-size: 40px; |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,20 @@ |
||||
module.exports = { |
||||
//基本路径
|
||||
publicPath: "./", |
||||
outputDir: "dist",
|
||||
//放置静态资源目录
|
||||
assetsDir: "static", |
||||
css: { |
||||
loaderOptions: { |
||||
css: { |
||||
// options here will be passed to css-loader
|
||||
}, |
||||
postcss: { |
||||
// options here will be passed to postcss-loader
|
||||
plugins: [require('postcss-px2rem')({ |
||||
remUnit: 54 |
||||
})] |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue