Skip to content

X
x-training-new
提交 a59f9be3 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

feat: 用户分析模块、首页、作品展示

上级 610f306d
显示空白字符变更
内嵌 并排
正在显示 包含 451 行增加 和 30 行删除
.env.dev
浏览文件 @ a59f9be3
VITE_LOGIN_URL=https://login.ezijing.com/auth/login/index
VITE_LOGIN_URL=https://login2.ezijing.com/auth/login/index
package.json
浏览文件 @ a59f9be3
......@@ -17,7 +17,9 @@
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
"vuex": "^3.6.2",
"echarts": "^5.2.0",
"vue-codemirror": "^4.0.6"
},
"devDependencies": {
"@rollup/plugin-eslint": "^8.0.1",
......
src/components/layout/Header.vue
浏览文件 @ a59f9be3
......@@ -27,14 +27,6 @@ export default {
return this.$route.path
}
},
watch: {
path: {
handler(nv) {
console.log(nv)
},
immediate: true
}
},
methods: {
menuSelect(item) {
this.$router.push(item.path)
......
src/components/layout/Main.vue
浏览文件 @ a59f9be3
......@@ -21,6 +21,6 @@ export default {
.app-main {
width: 100%;
position: relative;
overflow: hidden;
/* overflow: hidden; */
}
</style>
src/main.js
浏览文件 @ a59f9be3
......@@ -6,6 +6,9 @@ import modules from './modules'
// 公共css
import '@/assets/css/base.css'
import beforeEnter from '@/utils/beforeEnter'
// codemirror
import './utils/codemirror/codemirror.css'
import './utils/codemirror/codemirror'
// Element-UI
import ElementUI from 'element-ui'
......
src/modules/home/index.js
浏览文件 @ a59f9be3
const routes = [
{
path: '/',
component: () => import('@/components/layout/Index.vue'),
children: [
{
path: 'home',
path: '/home',
component: () => import('./views/Index.vue')
}
]
},
]
export { routes }
src/modules/home/views/Index.vue
浏览文件 @ a59f9be3
<template>
<div class="home">home</div>
<div class="home">
<div class="top">
<el-button type="primary" size="medium" plain round @click="visible = true">切换角色</el-button>
</div>
<div class="inner">
<div class="header">
<div class="logo">金融</div>
<ul class="menu">
<template v-for="(item, index) in menuList">
{{index === 0 ? '' : '|'}}<li :class="{ active: path.includes(item.path)}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
</template>
</ul>
</div>
</div>
<!-- <btn :attrs="{ title: '用户研究', left: '240px', top: '120px' }" @click.native="handleClick('/user-study')" /> -->
<role-select :visible="visible" @roleSelect="handleRoleSelect" />
</div>
</template>
<script>
export default {}
import RoleSelect from '../components/RoleSelect.vue'
export default {
components: { RoleSelect },
data() {
return {
visible: false,
menuList: [
{ label: '首页', path: '/home' },
{ label: '产品分析', path: '/product-analysis' },
{ label: '用户研究', path: '/user-study' },
{ label: '营销工具使用', path: '/market-tools' },
{ label: '作品展示', path: '/works-show' }
]
}
},
computed: {
path() {
return this.$route.path
}
},
methods: {
handleClick(path) {
this.$router.push(path)
},
handleRoleSelect(val) {
console.log(val)
this.visible = false
},
menuSelect(item) {
this.$router.push(item.path)
}
}
}
</script>
<style scoped>
.home{
height:calc(100vh - 86px);
.top{
height:80px;
}
.top .el-button{
float:right;
margin:20px 50px 0 0;
}
.inner{
background:url('@/assets/images/home.png') no-repeat left center;
width:1398px;
height:552px;
margin:0 auto 30px;
border-radius:6px;
position:relative;
}
.header{
margin:0 6.9%;
height:100px;
padding-top:33px;
display:flex;
}
.logo{
font-size: 40px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #60A797;
text-align:center;
width:280px;
}
.menu{
width: 780px;
height:56px;
border-radius:28px;
display:flex;
font-size:18px;
line-height:56px;
color:#fff;
}
.menu li{
padding:0 40px;
cursor: pointer;
}
.menu li.active{
font-weight: bold;
}
</style>
src/modules/test/index.js
浏览文件 @ a59f9be3
......@@ -4,7 +4,11 @@ const routes = [
{
path: '/test',
component: AppLayout,
children: [{ path: '', component: () => import('./views/List.vue') }]
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: 'echart', component: () => import('./views/Echart.vue') },
{ path: 'codemirror', component: () => import('./views/Codemirror.vue') }
]
}
]
......
src/modules/user-study/views/Index.vue
浏览文件 @ a59f9be3
<template>
<div class="user-study">用户研究</div>
<div class="user-study">
<h5>请为您的目标人群选择特征</h5>
<div class="container">
<div class="left">
<div class="top-bar">
<el-button v-show="!showTool" type="primary" size="medium" round @click="showTool = true">编程工具</el-button>
<el-button v-show="showTool" type="primary" size="medium" round @click="showTool = false">关闭工具</el-button>
</div>
<div class="questions" v-if="!showTool">
<multiple-choice :choice="current.choice" v-if="status !== 1">
<template #btn-prev v-if="status === 0">
<el-button v-if="current.index !== 0" size="medium" @click="handlePrev" round>上一题</el-button>
</template>
<template #btn-center v-if="status === 2">
<el-button size="medium" @click="handleReturn" round>返回</el-button>
</template>
<template #btn-next v-if="status === 0">
<el-button v-if="current.index < questions.length - 1" type="primary" size="medium" @click="handleNext" round>下一题</el-button>
<el-button v-else type="primary" size="medium" @click="handleComplete" round>完成选择</el-button>
</template>
</multiple-choice>
<div v-else class="complete">
<p>根据您选择的目标人群特征分析，此类受众并不适合当前的金融产品,请重新选择！</p>
<answer-list :list="questions" @select="handleSelect"></answer-list>
<div style="text-align:center;">
<el-button type="primary" size="medium" @click="handleFinish" round>完成报告</el-button>
</div>
</div>
</div>
<div class="tool" v-else>
<codemirror class="code" v-model="code"></codemirror>
<div style="text-align:center;padding-top:15px;">
<el-button type="primary" size="medium" @click="handleSubmit" round>确认提交</el-button>
</div>
</div>
</div>
<div class="right">
<tabs v-model="tabActive" :list="list" @tab-click="handleTabClick"></tabs>
<div class="echart-cont" v-if="tabActive === '1'">
<echart-bar :value="current.choice"/>
</div>
<user-table v-if="tabActive === '2'" />
</div>
</div>
</div>
</template>
<script>
export default {}
import MultipleChoice from '../components/MultipleChoice.vue'
import Tabs from '../components/Tabs.vue'
import AnswerList from '../components/AnswerList.vue'
import UserTable from '../components/UserTable.vue'
import EchartBar from '../components/EchartBar.vue'
export default {
components: { MultipleChoice, Tabs, AnswerList, UserTable, EchartBar },
data() {
return {
showTool: false,
questions: [
{
id: '111',
title: '消费者年龄',
options: [
{ label: '18岁以下', value: 1 },
{ label: '18-30岁', value: 2 },
{ label: '31-45岁', value: 3 },
{ label: '46-60岁', value: 4 }
],
selection: [],
index: 1
},
{
id: '222',
title: '是否交易过基金产品',
options: [
{ label: '交易过基金产品', value: 1 },
{ label: '没有交易过基金产品', value: 2 }
],
selection: [],
index: 2
},
{
id: '333',
title: '理财经验',
options: [
{ label: '没有理财经验', value: 1 },
{ label: '1-3年理财经验', value: 2 },
{ label: '3-5年理财经验', value: 3 },
{ label: '5年以上理财经验', value: 4 }
],
selection: [],
index: 3
},
{
id: '444',
title: '学历',
options: [
{ label: '初中及以下', value: 1 },
{ label: '高中及中专', value: 2 },
{ label: '大专', value: 3 },
{ label: '本科', value: 4 },
{ label: '硕士', value: 5 },
{ label: '博士及以上', value: 6 }
],
selection: [],
index: 4
},
{
id: '555',
title: '年收入总额',
options: [
{ label: '5万以下年收入', value: 1 },
{ label: '5-15万年收入', value: 2 },
{ label: '15-25万年收入', value: 3 },
{ label: '25-50万年收入', value: 4 },
{ label: '50-100万年收入', value: 5 },
{ label: '100万以上年收入', value: 6 }
],
selection: [],
index: 5
},
{
id: '666',
title: '可支配资产总额',
options: [
{ label: '10万以下', value: 1 },
{ label: '10-20万', value: 2 },
{ label: '20-50万', value: 3 },
{ label: '50-80万', value: 4 },
{ label: '80-100万', value: 5 },
{ label: '100-300万', value: 6 },
{ label: '300万以上', value: 7 }
],
selection: [],
index: 6
},
{
id: '777',
title: '金融资产中占比最高',
options: [
{ label: '存款', value: 1 },
{ label: '基金', value: 2 },
{ label: '保险', value: 3 },
{ label: '股票', value: 4 },
{ label: '理财产品', value: 5 },
{ label: '其他', value: 6 }
],
selection: [],
index: 7
}
],
current: {
index: 0,
choice: {}
},
status: 0, // 0未完成，1，已完成，2，修改
code: '',
tabActive: '1',
list: [
{ label: '数据展示', value: '1' },
{ label: '数据列表', value: '2' }
]
}
},
created() {
window.setTimeout(() => {
this.current.index = 0
this.current.choice = this.questions[0]
}, 1000)
},
methods: {
handlePrev() {
this.current.index--
this.current.choice = this.questions[this.current.index]
},
handleNext() {
if (this.current.index < this.questions.length - 1) {
this.current.index++
this.current.choice = this.questions[this.current.index]
}
},
handleComplete() {
console.log(this.questions)
this.status = 1
},
handleTabClick() {},
handleSelect(val) {
this.current.index = val.index - 1
this.current.choice = val
this.status = 2
},
handleReturn() {
this.status = 1
},
handleFinish() {},
handleSubmit() {}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.user-study{
height:calc(100vh - 86px);
width:1260px;
padding-bottom:40px;
/* height:calc(100vh - 86px); */
margin:0 auto;
}
h5{
font-size:22px;
line-height:68px;
font-weight:normal;
color:#585858;
}
.container{
display:flex;
}
.container .left{
width:43%;
background:#fff;
height:538px;
}
.top-bar{
padding:20px 30px 0;
text-align:right;
}
.top-bar .el-button, .complete .el-button, .tool .el-button{
padding:8px 30px;
}
.questions{
height: calc(100% - 52px);
overflow-y: auto;
&::-webkit-scrollbar{
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-button{
width: 0;
height: 0;
}
&::-webkit-scrollbar-track{
}
&::-webkit-scrollbar-thumb{
border-radius: 8px;
background-color: #c3e3db;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #68b8a4;
}
&::-webkit-scrollbar-thumb:active {
background-color: #68b8a4;
}
}
.complete{
padding:20px 25px;
}
.complete>p{
font-size:16px;
line-height:30px;
color:#333;
user-select: none;
}
.tool{
padding:15px 20px;
}
.code ::v-deep.CodeMirror {
height: 398px;
}
.container .right{
width:calc(57% - 20px);
margin-left:20px;
background:#fff;
}
.echart-cont{
padding:30px 30px 20px;
height:calc(100% - 54px);
}
</style>
src/modules/works-show/views/Index.vue
浏览文件 @ a59f9be3
<template>
<div class="works-show">作品展示</div>
<div class="works-show">
<h5>请整理好报告然后提交吧！</h5>
<div class="container">
<div class="product">
产品分析报告
<div class="btn-bar">
<el-button type="primary" size="medium" plain round>编辑</el-button>
<el-button type="primary" size="medium" round>提交</el-button>
</div>
</div>
<div class="user">
用户分析报告
<div class="btn-bar">
<el-button type="primary" size="medium" plain round>查看</el-button>
<el-button type="primary" size="medium" round>成绩</el-button>
</div>
</div>
<div class="tool">
营销工具使用
<div class="btn-bar">
<el-button type="primary" size="medium" plain round>编辑</el-button>
<el-button type="primary" size="medium" round>提交</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {}
export default {
data() {
return {}
}
}
</script>
<style scoped>
.works-show{
height:calc(100vh - 86px);
width:1180px;
margin:0 auto;
}
h5{
font-size:18px;
line-height:120px;
font-weight:normal;
text-indent: 20px;
color:#666;
text-align:center;
}
.container{
/* display: flex; */
text-align:center;
}
.container>div{
width:260px;
height:360px;
padding-top:240px;
background:#fff;
border-radius:10px;
margin-right:20px;
text-align:center;
color:#777;
display:inline-block;
}
.container .product{
background:url('@/assets/images/works_show_icon1.png') #fff no-repeat center 8px;
}
.container .user{
background:url('@/assets/images/works_show_icon2.png') #fff no-repeat center 10px;
}
.container .tool{
background:url('@/assets/images/works_show_icon3.png') #fff no-repeat center 4px;
}
.btn-bar{
padding-top:20px;
border-top:1px dashed #c3c3c3;
margin:20px 20px 0;
}
.btn-bar .el-button{
padding:6px 22px;
}
</style>
vite.config.js
浏览文件 @ a59f9be3
......@@ -14,7 +14,7 @@ export default defineConfig({
cert: fs.readFileSync(path.join(__dirname, './https/dev.ezijing.com.pem'))
},
proxy: {
'/api': 'https://project-api.ezijing.com'
'/api': 'https://x-training2.ezijing.com'
}
},
resolve: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论