Skip to content

X
x-training-new
提交 8c36dd62 authored 作者: matian's avatar matian
浏览文件
操作

Auto stash before merge of "master" and "origin/master"

上级 b3bd3a80
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 250 行增加 和 72 行删除
src/modules/market-tools/components/Email.vue 0 → 100644
浏览文件 @ 8c36dd62
差异被折叠。
src/modules/market-tools/components/cardList.vue 0 → 100644
浏览文件 @ 8c36dd62
<template>
<div class="main_content">
<!-- 步骤一 -->
<el-card class="box_card">
<div slot="header" class="clearfix">
<span>{{ cardList.cardTitle }}</span>
<img
src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png"
alt=""
@click="handleAdd"
class="box_card_add"
style="float: right; padding: 3px 0"
/>
<!-- <el-button @click="handleAdd" type="text" icon="el-icon-circle-plus-outline" class="box_card_add"></el-button> -->
</div>
<div class="optionList">
<div class="optionList_left">
<div v-for="item in cardList.form.personAttribute.length - 1" :key="item">
<div class="optionList_left_line"></div>
<div class="optionList_left_text">且</div>
</div>
</div>
<div class="optionList_right">
<el-form :inline="true" :model="cardList.form">
<div v-for="(item, indexB) in list" :key="indexB">
<el-form-item>
<el-select v-model="item.personal">
<el-option
v-for="it in item.personalMap"
:key="it.value"
:label="it.label"
:value="it.value"
:disabled="it.disabled"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="item.equal">
<el-option v-for="it in item.equalMap" :key="it.value" :label="it.label" :value="it.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="item.range">
<template v-if="item.personalMap.length > 0 && item.personalMap.find(i => item.personal === i.value)">
<el-option
v-for="it in item.personalMap.find(i => item.personal === i.value).children"
:key="it.value"
:label="it.label"
:value="it.value"
>
</el-option>
</template>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="text" @click="handleDelete(item, indexB)" icon="el-icon-close"></el-button>
</el-form-item>
</div>
</el-form>
</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
props: {
cardList: {
type: Object,
default: () => {}
}
},
computed: {
list() {
return this.cardList.form.personAttribute.map(item => {
item.personalMap = item.personalMap.map(i => {
i.disabled = !!this.cardList.form.personAttribute.find(item => item.personal === i.value)
console.log(item.personal, i.value)
return i
})
return item
})
}
},
methods: {
// // 增加
handleAdd() {
if (this.cardList.form.personAttribute.length < this.cardList.form.personAttribute[0].personalMap.length) {
const item = Object.assign({}, this.cardList.form.personAttribute[0])
item.personal = ''
item.equal = ''
item.range = ''
// eslint-disable-next-line vue/no-mutating-props
this.cardList.form.personAttribute.push(item)
} else {
this.$message.warning('添加项不能超过下拉选项个数')
}
},
// 删除
handleDelete(item, indexB) {
// console.log(item, 'item11')
if (this.cardList.form.personAttribute.length > 1) {
// eslint-disable-next-line vue/no-mutating-props
this.cardList.form.personAttribute.splice(indexB, 1)
} else {
this.$message.warning('默认至少有一条数据')
}
}
}
}
</script>
<style lang="scss" scoped>
.main_content {
display: flex;
justify-content: space-around;
.main_content_left {
min-height: 400px;
}
.main_content_right {
.box_card {
min-width: 520px;
.optionList {
display: flex;
.optionList_left {
position: relative;
display: flex;
flex-direction: column;
.optionList_left_line {
width: 0px;
height: 85px;
border: 1px solid #c5c5c5;
opacity: 1;
}
.optionList_left_text {
border-radius: 50%;
width: 25px;
height: 25px;
background: #fff;
border: 1px solid #c5c5c5;
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: 25px;
color: #49bba2;
margin-left: -12px;
margin-top: -60px;
}
}
.optionList_right {
margin-left: 16px;
.el-form-item {
padding-top: 0;
.optionList_right_del {
width: 12px;
height: 12px;
opacity: 1;
}
}
}
}
}
}
}
</style>
src/modules/market-tools/views/Index.vue
浏览文件 @ 8c36dd62
...@@ -4,8 +4,13 @@ ...@@ -4,8 +4,13 @@
<div class="tool-bg"> <div class="tool-bg">
<div class="tool-content"> <div class="tool-content">
<ul> <ul>
<li @click="selectList(index)" v-for="(item, index) in list" :key="index" :class="listIndex === index ? 'active' : ''"> <li
<img :src="listIndex === index ? item.iconActive : item.icon"> @click="selectList(index)"
v-for="(item, index) in list"
:key="index"
:class="listIndex === index ? 'active' : ''"
>
<img :src="listIndex === index ? item.iconActive : item.icon" />
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
</li> </li>
</ul> </ul>
...@@ -23,107 +28,104 @@ export default { ...@@ -23,107 +28,104 @@ export default {
listIndex: 2, listIndex: 2,
list: [ list: [
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon1.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon3.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon1.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon-a3.png',
text: '搜索引擎优化' text: '视频营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon2.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon2.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
text: '搜索引擎营销' text: '邮件营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon3.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon3.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
text: '视频营销' text: 'APP营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon4.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon4.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
text: '社交媒体营销' text: '移动短信营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon5.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon5.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
text: '智能推荐' text: '微信提醒营销'
} }
] ]
} }
}, },
methods: { methods: {
selectList(n) { selectList(n) {
this.listIndex = n console.log(n, 'nnnn')
if (n === 9) {
// this.$router.push('/')
}
// if (n === 2) return
// this.$message('暂未开通')
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.market-tools{ .market-tools {
.tool-main{ .tool-main {
background: #fff; background: #fff;
padding: 10px 0 50px 0; padding-bottom: 11px;
border-radius: 16px; .tool-bg {
.tool-bg{
position: relative; position: relative;
width: 1112px; width: 1112px;
height: 489px; height: 489px;
margin: 0 auto; margin: 0 auto;
background: url(https://webapp-pub.ezijing.com/x-training-new/tool-index-bg.png); background: url(https://webapp-pub.ezijing.com/x-training-new/tool-index-bg.png);
background-size: 100% 100%; background-size: 100% 100%;
.tool-content{ .tool-content {
width: 600px; width: 708px;
position: absolute; position: absolute;
top: 166px; top: 166px;
left: 270px; left: 282px;
ul{ ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
li{ li {
width: 180px; width: 180px;
height: 96px; height: 96px;
background: rgba(255, 255, 255, 0.39); background: #f5f5f5;
border: 1px solid #E8E8E8; border-radius: 6px;
opacity: 1; display: flex;
border-radius: 10px; align-items: center;
margin: 0 20px 20px 0; // margin: 0 10px 10px 0;
text-align: center; margin: 0 45px 10px 24px;
position: relative;
cursor: pointer; cursor: pointer;
&.active{ &.active {
border-color: rgba(73, 187, 162, 1); background: #68b8a4;
box-shadow: 0px 3px 18px rgba(51, 51, 51, 0.15); .text {
// background: #68B8A4; color: #fff;
.text{
// color: #fff;
} }
} }
img{ img {
margin-top: 20px; margin-left: 16px;
// margin-left: 16px;
} }
.text{ .text {
position: absolute; font-size: 14px;
bottom: 15px; color: #797979;
left: 0; line-height: 24px;
width: 100%; margin-left: 14px;
font-size: 16px;
color: #333333;
line-height: 100%;
// margin-top: 18px;
// margin-left: 14px;
} }
} }
} }
.confirm-btn{ .confirm-btn {
width: 119px; width: 119px;
background: #68B8A4; background: #68b8a4;
border-radius: 16px; border-radius: 16px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
line-height: 32px; line-height: 32px;
cursor: pointer; cursor: pointer;
} }
......
src/modules/market-tools/views/Tool.vue
浏览文件 @ 8c36dd62
<template> <template>
<div class="tool-box"> <div class="tool-box">
<ul class="left-nav"> <ul class="left-nav">
<li @click="selectList(index)" v-for="(item, index) in list" :key="index" :class="listIndex === index ? 'active' : ''"> <li
@click="selectList(index)"
v-for="(item, index) in list"
:key="index"
:class="listIndex === index ? 'active' : ''"
>
<div class="icon-box"> <div class="icon-box">
<img :src="listIndex === index ? item.iconActive : item.icon"> <img :src="listIndex === index ? item.iconActive : item.icon" />
</div> </div>
<div class="text">{{ item.text }}</div> <div class="text">{{ item.text }}</div>
</li> </li>
</ul> </ul>
<div class="right-content"> <div class="right-content">
<dou-yin></dou-yin> <!-- <dou-yin></dou-yin> -->
<Email />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import DouYin from '../components/DouYin.vue' import Email from '../components/Email.vue'
// import DouYin from '../components/DouYin.vue'
export default { export default {
components: { DouYin }, components: { Email },
data() { data() {
return { return {
listIndex: 2, listIndex: 9,
list: [ list: [
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
...@@ -90,40 +97,40 @@ export default { ...@@ -90,40 +97,40 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tool-box{ .tool-box {
display: flex; display: flex;
padding: 25px 30px 30px; padding: 25px 30px 30px;
.left-nav{ .left-nav {
width: 264px; width: 264px;
height: 684px; height: 684px;
background: url(https://webapp-pub.ezijing.com/x-training-new/nav-bg.png); background: url(https://webapp-pub.ezijing.com/x-training-new/nav-bg.png);
background-size: 100% 100%; background-size: 100% 100%;
padding-top: 18px; padding-top: 18px;
box-sizing: border-box; box-sizing: border-box;
li{ li {
width: 220px; width: 220px;
height: 58px; height: 58px;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
cursor: pointer; cursor: pointer;
&.active{ &.active {
background: #68B8A4; background: #68b8a4;
.text{ .text {
color: #fff; color: #fff;
} }
} }
.icon-box{ .icon-box {
width: 50px; width: 50px;
margin-left: 40px; margin-left: 40px;
} }
.text{ .text {
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;
} }
} }
} }
.right-content{ .right-content {
flex: 1; flex: 1;
background: #fff; background: #fff;
margin-left: 30px; margin-left: 30px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论