e
3 years ago
parent
8b281f4477
commit
dffe2dea60
85 changed files with 24766 additions and 0 deletions
@ -0,0 +1,5 @@ |
|||||||
|
# Default ignored files |
||||||
|
/shelf/ |
||||||
|
/workspace.xml |
||||||
|
# Editor-based HTTP Client requests |
||||||
|
/httpRequests/ |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
<component name="InspectionProjectProfileManager"> |
||||||
|
<profile version="1.0"> |
||||||
|
<option name="myName" value="Project Default" /> |
||||||
|
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" /> |
||||||
|
</profile> |
||||||
|
</component> |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
<component name="InspectionProjectProfileManager"> |
||||||
|
<settings> |
||||||
|
<option name="PROJECT_PROFILE" /> |
||||||
|
</settings> |
||||||
|
</component> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<project version="4"> |
||||||
|
<component name="ProjectModuleManager"> |
||||||
|
<modules> |
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/scq.iml" filepath="$PROJECT_DIR$/.idea/scq.iml" /> |
||||||
|
</modules> |
||||||
|
</component> |
||||||
|
</project> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<module type="WEB_MODULE" version="4"> |
||||||
|
<component name="NewModuleRootManager"> |
||||||
|
<content url="file://$MODULE_DIR$"> |
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" /> |
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" /> |
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" /> |
||||||
|
</content> |
||||||
|
<orderEntry type="inheritedJdk" /> |
||||||
|
<orderEntry type="sourceFolder" forTests="false" /> |
||||||
|
</component> |
||||||
|
</module> |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<project version="4"> |
||||||
|
<component name="VcsDirectoryMappings"> |
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" /> |
||||||
|
</component> |
||||||
|
</project> |
||||||
@ -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