提交 7ad76d26 authored 作者: 王鹏飞's avatar 王鹏飞

升级vue-form

上级 dcfda7af
...@@ -1119,9 +1119,9 @@ ...@@ -1119,9 +1119,9 @@
} }
}, },
"@ezijing/vue-form": { "@ezijing/vue-form": {
"version": "2.0.13", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/@ezijing/vue-form/-/vue-form-2.0.13.tgz", "resolved": "https://registry.npmjs.org/@ezijing/vue-form/-/vue-form-2.1.2.tgz",
"integrity": "sha512-r+OQxGcjeOxn8gq47zy3UCGj5u3VKpbcSZ76YpNfrLQTmbwbmxc1EIhVK6reV1rOW0/G9c6plVqvb0X/Sg9oHw==", "integrity": "sha512-2gJGVHfo+HGBftEufLaO7dEQ5mB+ftSzFHUWyV+hXjZVgD3Uzjp3dAh5T2NQpEIm2LYyOqtcQ/ifRCTJAVNXHw==",
"requires": { "requires": {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0", "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-preset-jsx": "^1.1.2", "@vue/babel-preset-jsx": "^1.1.2",
......
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
}, },
"dependencies": { "dependencies": {
"@ezijing/vue-form": "^2.0.13", "@ezijing/vue-form": "^2.1.2",
"@ezijing/vue-passport": "^1.0.0", "@ezijing/vue-passport": "^1.0.0",
"axios": "^0.21.0", "axios": "^0.21.0",
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
......
<template>
<div class="content-box">
<div class="content">
<div class="menu">
<div v-for="(item, value) in list" :key="value">
<router-link :to="item.url" @click.native="geturl()">
<div class="li" :class="value === target ? 'active' : ''">{{ item.name }}</div>
</router-link>
</div>
</div>
<div class="fill">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['menu'],
data: function () {
return {
list: this.menu,
target: 0,
tag: '',
}
},
mounted() {
let _tag = this.$route.query.tag
this.activeButton(_tag)
},
watch: {
$route(to) {
this.activeButton(to.query.tag)
},
},
methods: {
geturl() {
this.$emit('urlChange')
},
// 增加标签背景颜色
activeButton(_tag) {
const that = this
if (_tag && that.tag !== _tag) {
that.tag = _tag
that.list.forEach(function (item, index) {
if (item.name == _tag) {
that.target = index
}
})
}
},
},
}
</script>
<style lang="scss" scoped>
@import '../assets/css/ProjectContent';
</style>
<style lang="scss">
.fill {
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft Yahei' !important;
font-size: 18px;
h3 {
font-size: 24px;
font-weight: 600;
line-height: 33px;
padding-bottom: 20px;
}
p {
margin-bottom: 15px;
> a {
color: #3a8fff;
text-decoration: underline;
}
}
}
</style>
<template>
<div class="project-title">
<h2>{{ title }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
title: '项目介绍',
}
},
created: function () {
let _path = this.$route.path
if (_path.search('project') === 1) {
this.title = '项目介绍'
return
}
if (_path.search('know') === 1) {
this.title = '招生中心'
return
}
if (_path.search('download') === 1) {
this.title = '下载专区'
return
}
if (_path.search('news') === 1) {
this.title = '新闻中心'
return
}
if (_path.search('contact') === 1) {
this.title = '联系我们'
return
}
if (_path.search('signup') === 1) {
this.title = '中国未来金融领袖计划项目报名系统'
return
}
},
}
</script>
<style scoped>
.project-title {
width: 100%;
height: 88px;
background-color: #333;
}
.project-title > h2 {
color: #ffffff;
font-size: 30px;
font-weight: 600;
height: 88px;
line-height: 68px;
max-width: 1200px;
margin: 0 auto;
}
</style>
import Vue from 'vue' // 引入vue框架 import Vue from 'vue' // 引入vue框架
import VueForm from '@ezijing/vue-form'
import '@ezijing/vue-form/dist/vue-form.css'
import VuePassport from '@ezijing/vue-passport' import VuePassport from '@ezijing/vue-passport'
import '@ezijing/vue-passport/dist/vue-passport.css' import '@ezijing/vue-passport/dist/vue-passport.css'
import VueForm from '@ezijing/vue-form'
import '@ezijing/vue-form/dist/vue-form.css'
import Element from 'element-ui' // 引入 element-ui 框架 import Element from 'element-ui' // 引入 element-ui 框架
import './style.scss' // 定义 element-ui主题色 + 公共样式 import './style.scss' // 定义 element-ui主题色 + 公共样式
import router from './router' // router定义 import router from './router' // router定义
......
<template>
<div>
<Project-title></Project-title>
<Project-content v-bind:menu="menu">
<div v-html="content"></div>
</Project-content>
</div>
</template>
<script>
import ProjectTitle from '../../components/ProjectTitle.vue'
import ProjectContent from '../../components/ProjectContent.vue'
import { introduction } from '../../action/axiosService.js'
export default {
components: {
ProjectTitle,
ProjectContent
},
data() {
return {
// 这个是传给组件的项目列表
menu: [{ name: '联系我们', url: '' }],
content: '',
tag: '联系我们'
}
},
mounted() {
const that = this
introduction({
tag: '联系我们',
cb: function(obj) {
that.content = obj
}
})
}
}
</script>
<style scoped></style>
<template>
<div>
<Project-title></Project-title>
<Project-content v-bind:menu="menu">
<h3 class="download-title">下载专区</h3>
<div v-html="content"></div>
</Project-content>
</div>
</template>
<script>
import ProjectTitle from '../../components/ProjectTitle.vue'
import ProjectContent from '../../components/ProjectContent.vue'
import { introduction } from '../../action/axiosService.js'
export default {
components: {
ProjectTitle,
ProjectContent
},
data() {
return {
// 这个是传给组件的项目列表
menu: [{ name: '下载专区', url: '' }],
content: '',
tag: '下载专区'
}
},
mounted() {
const that = this
introduction({
tag: that.tag,
cb: function(obj) {
that.content = obj
}
})
}
}
</script>
<style scoped>
a {
margin-top: 20px;
color: #000000;
}
</style>
<template>
<!-- 招生中心 -->
<div>
<Project-title></Project-title>
<Project-content v-bind:menu="menu" @urlChange="updateUrl">
<div v-html="content"></div>
</Project-content>
</div>
</template>
<script>
import ProjectTitle from '../../components/ProjectTitle.vue'
import ProjectContent from '../../components/ProjectContent.vue'
import { introduction } from '../../action/axiosService.js'
export default {
components: {
ProjectTitle,
ProjectContent
},
data() {
return {
// 这个是传给组件的项目列表
menu: [
{ name: '报名须知', url: '/know?tag=报名须知' },
{ name: '申请流程', url: '/know?tag=申请流程' },
{ name: '招生简章', url: '/know?tag=招生简章' },
{ name: '学费信息', url: '/know?tag=学费信息' }
],
content: '',
tag: '报名须知'
}
},
created() {
let _tag = this.$route.query.tag
if (_tag) this.tag = _tag
},
mounted() {
const that = this
introduction({
tag: that.tag,
cb: function(obj) {
that.content = obj
}
})
},
methods: {
updateUrl() {
const that = this
if (that.tag === that.$route.query.tag) return
this.tag = this.$route.query.tag
introduction({
tag: that.tag,
cb: function(obj) {
that.content = obj
}
})
}
}
}
</script>
<style scoped></style>
...@@ -223,7 +223,7 @@ export default { ...@@ -223,7 +223,7 @@ export default {
code: 'industry', code: 'industry',
computed(data) { computed(data) {
const found = industryList.find(item => item.value === data.industry) const found = industryList.find(item => item.value === data.industry)
return found.label return found ? found.label : data.industry
} }
}, },
{ label: '工作部门', code: 'dept_cn' }, { label: '工作部门', code: 'dept_cn' },
......
<template>
<div>
<Project-title></Project-title>
<div class="content-box">
<div class="content">
<template v-if="showlist">
<div
class="li"
v-for="(item, ind) in list"
:key="item.id"
:serial="ind"
@click="getContent(ind)"
>
<img :src="item.photo_uri" alt class="head" />
<div class="li-preview">
<h2 class="li-title">{{ item.title }}</h2>
<div>{{ item.updated_time }}</div>
</div>
</div>
</template>
<template v-else>
<div class="news-list-content-title">
<div class="content-back" @click="showList">返回</div>
<h2 class="title">{{ list[order].title }}</h2>
</div>
<div class="news-list-content-time">{{ list[order].updated_time }}</div>
<div class="news-list-content" v-html="list[order].content"></div>
</template>
</div>
</div>
</div>
</template>
<script>
import ProjectTitle from '../../components/ProjectTitle.vue'
import { getNews } from '../../action/axiosService.js'
export default {
components: {
ProjectTitle
},
data() {
return {
// 这个是传给组件的项目列表
list: [],
showlist: true,
content: '',
order: 0
}
},
mounted() {
const that = this
getNews({
cb: function (obj) {
that.list = obj
}
})
},
methods: {
getContent: function (index) {
console.log('w', this.list[index])
this.order = index
this.showlist = false
},
showList() {
this.showlist = true
}
}
}
</script>
<style>
h2,
h3 {
padding: 0;
margin: 0;
list-style: none;
}
</style>
<style lang="scss" scoped>
.content-box {
width: 100%;
background-color: #ffffff;
position: relative;
}
.content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
top: -20px;
background-color: #ffffff;
overflow: auto;
.news-list-content {
padding: 0 20px;
}
}
.li {
display: flex;
height: 160px;
width: 100%;
background-color: #ffffff;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
margin-bottom: 40px;
cursor: pointer;
.head {
width: 284px;
height: 160px;
}
.li-preview {
padding-top: 26px;
padding-left: 20px;
font-size: 24px;
font-weight: 300;
> div {
font-family: 'PingFangSC-Linght', 'PingFang SC', 'Microsoft Yahei';
}
}
.li-title {
height: 74px;
line-height: 32px;
font-size: 24px;
font-weight: 500;
font-family: 'PingFangSC-Semibold', 'PingFang SC', 'Microsoft Yahei';
}
.li-title:hover {
color: #c41230;
}
}
.news-list-content-title {
display: flex;
width: 100%;
box-sizing: border-box;
border-bottom: 1px dashed #ccc;
padding: {
top: 20px;
}
margin: 0 20px;
height: 60px;
> .content-back {
color: #3a8fff;
font-size: 20px;
width: 80px;
cursor: pointer;
}
> .title {
text-align: center;
}
}
.news-list-content-time {
height: 40px;
text-align: center;
}
</style>
...@@ -12,22 +12,6 @@ export default [ ...@@ -12,22 +12,6 @@ export default [
path: '/project', // 项目介绍 path: '/project', // 项目介绍
component: () => import('@/pages/project/index.vue') component: () => import('@/pages/project/index.vue')
}, },
{
path: '/news', // 新闻列表
component: () => import('@/pages/news/index.vue')
},
{
path: '/know', // 招生简章
component: () => import('@/pages/know/index.vue')
},
{
path: '/download', // 资料下载
component: () => import('@/pages/download/index.vue')
},
{
path: '/contact', // 联系我们
component: () => import('@/pages/contact/index.vue')
},
{ {
path: '/recruit', // 招生信息 path: '/recruit', // 招生信息
component: () => import('@/pages/recruitInfo/index.vue') component: () => import('@/pages/recruitInfo/index.vue')
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论