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 @@
<div class="tool-bg">
<div class="tool-content">
<ul>
<li @click="selectList(index)" v-for="(item, index) in list" :key="index" :class="listIndex === index ? 'active' : ''">
<img :src="listIndex === index ? item.iconActive : item.icon">
<li
@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>
</li>
</ul>
......@@ -23,107 +28,104 @@ export default {
listIndex: 2,
list: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon1.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon1.png',
text: '搜索引擎优化'
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon3.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon-a3.png',
text: '视频营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon2.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon2.png',
text: '搜索引擎营销'
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
text: '邮件营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon3.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon3.png',
text: '视频营销'
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
text: 'APP营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon4.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon4.png',
text: '社交媒体营销'
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
text: '移动短信营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon5.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon5.png',
text: '智能推荐'
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
text: '微信提醒营销'
}
]
}
},
methods: {
selectList(n) {
this.listIndex = n
console.log(n, 'nnnn')
if (n === 9) {
// this.$router.push('/')
}
// if (n === 2) return
// this.$message('暂未开通')
}
}
}
</script>
<style lang="scss" scoped>
.market-tools{
.tool-main{
.market-tools {
.tool-main {
background: #fff;
padding: 10px 0 50px 0;
border-radius: 16px;
.tool-bg{
padding-bottom: 11px;
.tool-bg {
position: relative;
width: 1112px;
height: 489px;
margin: 0 auto;
background: url(https://webapp-pub.ezijing.com/x-training-new/tool-index-bg.png);
background-size: 100% 100%;
.tool-content{
width: 600px;
.tool-content {
width: 708px;
position: absolute;
top: 166px;
left: 270px;
ul{
left: 282px;
ul {
display: flex;
flex-wrap: wrap;
}
li{
li {
width: 180px;
height: 96px;
background: rgba(255, 255, 255, 0.39);
border: 1px solid #E8E8E8;
opacity: 1;
border-radius: 10px;
margin: 0 20px 20px 0;
text-align: center;
position: relative;
background: #f5f5f5;
border-radius: 6px;
display: flex;
align-items: center;
// margin: 0 10px 10px 0;
margin: 0 45px 10px 24px;
cursor: pointer;
&.active{
border-color: rgba(73, 187, 162, 1);
box-shadow: 0px 3px 18px rgba(51, 51, 51, 0.15);
// background: #68B8A4;
.text{
// color: #fff;
&.active {
background: #68b8a4;
.text {
color: #fff;
}
}
img{
margin-top: 20px;
// margin-left: 16px;
img {
margin-left: 16px;
}
.text{
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
font-size: 16px;
color: #333333;
line-height: 100%;
// margin-top: 18px;
// margin-left: 14px;
.text {
font-size: 14px;
color: #797979;
line-height: 24px;
margin-left: 14px;
}
}
}
.confirm-btn{
.confirm-btn {
width: 119px;
background: #68B8A4;
background: #68b8a4;
border-radius: 16px;
margin: 0 auto;
text-align: center;
font-size: 18px;
color: #FFFFFF;
color: #ffffff;
line-height: 32px;
cursor: pointer;
}
......
src/modules/market-tools/views/Tool.vue
浏览文件 @ 8c36dd62
<template>
<div class="tool-box">
<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">
<img :src="listIndex === index ? item.iconActive : item.icon">
<img :src="listIndex === index ? item.iconActive : item.icon" />
</div>
<div class="text">{{ item.text }}</div>
</li>
</ul>
<div class="right-content">
<dou-yin></dou-yin>
<!-- <dou-yin></dou-yin> -->
<Email />
</div>
</div>
</template>
<script>
import DouYin from '../components/DouYin.vue'
import Email from '../components/Email.vue'
// import DouYin from '../components/DouYin.vue'
export default {
components: { DouYin },
components: { Email },
data() {
return {
listIndex: 2,
listIndex: 9,
list: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
......@@ -90,40 +97,40 @@ export default {
</script>
<style lang="scss" scoped>
.tool-box{
.tool-box {
display: flex;
padding: 25px 30px 30px;
.left-nav{
.left-nav {
width: 264px;
height: 684px;
background: url(https://webapp-pub.ezijing.com/x-training-new/nav-bg.png);
background-size: 100% 100%;
padding-top: 18px;
box-sizing: border-box;
li{
li {
width: 220px;
height: 58px;
display: flex;
align-items: center;
margin: 0 auto;
cursor: pointer;
&.active{
background: #68B8A4;
.text{
&.active {
background: #68b8a4;
.text {
color: #fff;
}
}
.icon-box{
.icon-box {
width: 50px;
margin-left: 40px;
}
.text{
.text {
font-size: 14px;
color: #666666;
}
}
}
.right-content{
.right-content {
flex: 1;
background: #fff;
margin-left: 30px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论