Skip to content

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

updates

上级 8c36dd62
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 728 行增加 和 228 行删除
src/modules/market-tools/components/cardList.vue → src/components/base/CardList.vue
浏览文件 @ ed052ae9
......@@ -116,54 +116,50 @@ export default {
display: flex;
justify-content: space-around;
.main_content_left {
min-height: 400px;
}
.main_content_right {
.box_card {
min-width: 520px;
.optionList {
.box_card {
.optionList {
display: flex;
.optionList_left {
position: relative;
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;
}
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;
}
}
.optionList_right {
margin-left: 16px;
.el-form-item {
padding-top: 0;
.optionList_right_del {
width: 12px;
height: 12px;
opacity: 1;
}
}
}
}
}
}
::v-deep .el-card {
border-radius: 16px;
width: 826px;
}
</style>
src/components/base/Step.vue
浏览文件 @ ed052ae9
<template>
<div></div>
<div class="step_content">
<ul class="step_content_list">
<li class="step_content_list_item" v-for="(item, index) in stepList" :key="index">
<div class="item_top">
<div :class="activeStep === index ? 'item_top_circle_active' : 'item_top_circle_inactive'"></div>
<div class="item_top_num" :class="activeStep === index ? 'item_top_num_active' : 'item_top_num_inactive'">
{{ '0' + (index + 1) }}
</div>
</div>
<div class="item_bottom" :class="activeStep === index ? 'item_bottom_active' : 'item_bottom_inactive'">
{{ item.stepName }}
</div>
</li>
</ul>
</div>
</template>
<script>
export default {}
export default {
props: {
activeStep: {
type: Number,
default: 0
}
},
data() {
return {
stepList: [{ stepName: '确定用户群' }, { stepName: '制定方案' }, { stepName: '明确主题' }, { stepName: '预览' }]
}
}
}
</script>
<style lang="scss" scoped>
.step_content {
width: 284px;
margin-top: 40px;
.step_content_list {
.step_content_list_item {
display: flex;
flex-direction: column;
.item_top {
display: flex;
.item_top_circle_active {
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
border: 5px solid #49bba2;
margin-left: -10px;
}
.item_top_circle_inactive {
width: 7px;
height: 7px;
background: #49bba2;
border-radius: 50%;
margin: 5px 2px 0px -3px;
}
.item_top_num {
margin-left: 18px;
font-size: 28px;
font-weight: bold;
line-height: 11px;
margin-top: 5px;
}
.item_top_num_active {
color: #49bba2;
}
.item_top_num_inactive {
color: #cacaca;
}
}
.item_bottom {
height: 106px;
border-left: 1px dashed #c5c5c5;
padding-left: 28px;
padding-top: 10px;
font-size: 16px;
font-weight: 400;
}
.item_bottom_active {
color: #333333;
}
.item_bottom_inactive {
color: #999999;
}
}
.step_content_list_item:last-child {
.item_bottom {
border-left: none;
}
}
}
}
</style>
src/components/base/StepTab.vue 0 → 100644
浏览文件 @ ed052ae9
<template>
<div class="main_content">
<!-- -->
<div class="main_content_plan">
<!-- 标题 -->
<div class="main_content_plan_title">
<slot name="plan_title"></slot>
</div>
<!-- tab切换 -->
<div class="main_content_plan_tab">
<div v-for="(item, index) in tabList" :key="index" @click="handleTab(index)">
<div class="tabItem" :class="activeTab === index ? 'tabItem_active' : 'tabItem_inactive'">
<img :src="item.icon" v-if="activeTab !== index" />
<img :src="item.iconActive" v-else />
<div class="tabItem_name">{{ item.tabName }}</div>
</div>
</div>
</div>
</div>
<!-- 触发条件 -->
<div class="main_content_trigger">
<div class="main_content_trigger_title">
<slot name="trigger_title"></slot>
</div>
<div class="main_content_trigger_con">
<slot name="trigger_con"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
time: '',
tabList: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon12.png',
tabName: '单次触发'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon21.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
tabName: '条件触发'
}
]
}
},
methods: {
handleTab(index) {
this.activeTab = index
this.$emit('tabActive', index)
}
}
}
</script>
<style lang="scss" scoped>
.main_content {
width: 883px;
background: rgba(255, 255, 255, 0.39);
border: 1px solid #e8e8e8;
opacity: 1;
border-radius: 16px;
display: flex;
flex-direction: column;
padding: 22px 0 43px 21px;
.main_content_plan {
.main_content_plan_title {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.main_content_plan_tab {
display: flex;
margin-top: 20px;
.tabItem_active {
background: #49bba2;
color: #ffffff;
.tabItem_name {
margin-left: 5px;
font-size: 16px;
color: #ffffff;
}
}
.tabItem_inactive {
background: #ffffff;
border: 1px solid #cdcdcd;
.tabItem_name {
margin-left: 5px;
font-size: 16px;
color: #6d6d71;
}
}
.tabItem {
width: 119px;
height: 36px;
border-radius: 18px;
margin-right: 19px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 16px;
height: 16px;
display: block;
}
.tabItem_name {
margin-left: 5px;
font-size: 16px;
}
}
}
}
.main_content_trigger {
margin-top: 40px;
.main_content_trigger_title {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.main_content_trigger_con {
font-size: 16px;
font-weight: 400;
color: #333333;
margin-top: 20px;
}
}
}
</style>
src/components/base/ToolCard.vue
浏览文件 @ ed052ae9
<template>
<div></div>
<div class="card">
<slot></slot>
</div>
</template>
<script>
......@@ -7,4 +9,12 @@ export default {}
</script>
<style lang="scss" scoped>
.card {
width: 1200px;
// max-height: 552px;
background: rgba(255, 255, 255, 0.39);
border-radius: 16px;
margin: 30px auto;
background-color: #fff;
}
</style>
src/modules/market-tools/components/mail/MailStepOne.vue 0 → 100644
浏览文件 @ ed052ae9
<template>
<div class="main_content">
<CardList class="box-card" v-for="(item, index) in cardList" :key="index" :cardList="item" />
</div>
</template>
<script>
import CardList from '@/components/base/CardList.vue'
import stepONeStep from '@/utils/stepOne'
export default {
components: {
CardList
},
data() {
return {
cardList: []
}
},
created() {
this.cardList = stepONeStep
}
}
</script>
<style lang="scss" scoped>
.main_content {
display: flex;
align-items: flex-start;
flex-direction: column;
.box-card {
min-width: 520px;
margin-bottom: 30px;
}
}
</style>
src/modules/market-tools/components/mail/MailStepTwo.vue 0 → 100644
浏览文件 @ ed052ae9
<template>
<div class="main_content">
<!-- -->
<div class="main_content_plan">
<!-- 标题 -->
<div class="main_content_plan_title">计划类型</div>
<!-- tab切换 -->
<div class="main_content_plan_tab">
<div v-for="(item, index) in tabList" :key="index" @click="handleTab(index)">
<div class="tabItem" :class="activeTab === index ? 'tabItem_active' : 'tabItem_inactive'">
<img :src="item.icon" v-if="activeTab !== index" />
<img :src="item.iconActive" v-else />
<div class="tabItem_name">{{ item.tabName }}</div>
</div>
</div>
</div>
</div>
<!-- 触发条件 -->
<div class="main_content_trigger">
<div class="main_content_trigger_title">触发条件</div>
<div class="main_content_trigger_con">
在 &nbsp;&nbsp;<el-date-picker
v-model="time"
type="datetime"
placeholder="选择日期时间"
default-time="12:00:00"
>
</el-date-picker
>&nbsp;&nbsp;对目标用户进行触达
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
time: '',
tabList: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon12.png',
tabName: '单次触发'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon21.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
tabName: '条件触发'
}
]
}
},
methods: {
handleTab(index) {
this.activeTab = index
}
}
}
</script>
<style lang="scss" scoped>
.main_content {
width: 883px;
background: rgba(255, 255, 255, 0.39);
border: 1px solid #e8e8e8;
opacity: 1;
border-radius: 16px;
display: flex;
flex-direction: column;
.main_content_plan {
.main_content_plan_title {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.main_content_plan_tab {
display: flex;
margin-top: 20px;
.tabItem_active {
background: #49bba2;
color: #ffffff;
.tabItem_name {
margin-left: 5px;
font-size: 16px;
color: #ffffff;
}
}
.tabItem_inactive {
background: #ffffff;
border: 1px solid #cdcdcd;
.tabItem_name {
margin-left: 5px;
font-size: 16px;
color: #6d6d71;
}
}
.tabItem {
width: 119px;
height: 36px;
border-radius: 18px;
margin-right: 19px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 16px;
height: 16px;
display: block;
}
.tabItem_name {
margin-left: 5px;
font-size: 16px;
}
}
}
}
.main_content_trigger {
margin-top: 40px;
.main_content_trigger_title {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.main_content_trigger_con {
font-size: 16px;
font-weight: 400;
color: #333333;
margin-top: 20px;
}
}
}
</style>
src/modules/market-tools/components/mail/MailStepTwocopy.vue 0 → 100644
浏览文件 @ ed052ae9
<template>
<div class="main_content">
<StepTab :tabList="tabList" @tabActive="handleTab">
<template #plan_title>计划类型</template>
<template #trigger_title>触发条件</template>
<template #trigger_con>
<div v-if="showIndex === 0">
在 &nbsp;&nbsp;<el-date-picker
v-model="time"
type="datetime"
placeholder="选择日期时间"
default-time="12:00:00"
>
</el-date-picker
>&nbsp;&nbsp;对目标用户进行触达
</div>
<div v-if="showIndex === 1">
<StepTodoList />
</div>
</template>
</StepTab>
</div>
</template>
<script>
import StepTab from '@/components/base/StepTab.vue'
import StepTodoList from './StepTodoList.vue'
export default {
components: { StepTab, StepTodoList },
data() {
return {
showIndex: 0,
time: '',
tabList: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon12.png',
tabName: '单次触发'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon21.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
tabName: '条件触发'
}
]
}
},
methods: {
handleTab(index) {
this.showIndex = index
}
}
}
</script>
src/modules/market-tools/components/mail/StepTodoList.vue 0 → 100644
浏览文件 @ ed052ae9
<template>
<div class="main_con">
<div class="optionList">
<div @click="handleAdd" style="float: right; padding: 0 130px">添加</div>
<div class="optionList_left">
<div>
<div class="optionList_left_line"></div>
<div class="optionList_left_text">且</div>
</div>
</div>
<div class="optionList_right">
<el-form :inline="true" :model="form">
<div v-for="(item, indexB) in list" :key="indexB">
<el-form-item>
当用户做过
<el-select v-model="item.triggerValue">
<el-option
v-for="it in item.list"
:key="it.value"
:label="it.label"
:value="it.value"
:disabled="it.disabled"
>
</el-option>
</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>
</div>
</template>
<script>
export default {
data() {
return {
form: {
triggerList: [
{
triggerValue: '',
list: [
{ value: '0', label: '启动APP' },
{ value: '1', label: '用户登录' },
{ value: '2', label: '购买基金商品' },
{ value: '3', label: '购买理财产品' },
{ value: '4', label: '购买保险产品' },
{ value: '5', label: '浏览基金产品' },
{ value: '6', label: '浏览理财产品' },
{ value: '7', label: '浏览保险产品' },
{ value: '8', label: '关闭APP' }
]
}
]
}
}
},
computed: {
list() {
return this.form.triggerList.map(item => {
item.list = item.list.map(i => {
i.disabled = !!this.form.triggerList.find(item => item.triggerValue === i.value)
return i
})
return item
})
}
},
methods: {
handleAdd() {
console.log('000')
if (this.form.triggerList.length < this.form.triggerList[0].list.length) {
const item = Object.assign({}, this.form.triggerList[0])
item.triggerValue = ''
// eslint-disable-next-line vue/no-mutating-props
this.form.triggerList.push(item)
} else {
this.$message.warning('添加项不能超过下拉选项个数')
}
},
handleDelete(item, indexB) {
if (this.form.triggerList.length > 1) {
this.form.triggerList.splice(indexB, 1)
} else {
this.$message.warning('默认至少有一条数据')
}
}
}
}
</script>
<style lang="scss" scoped>
.main_content {
display: flex;
justify-content: space-around;
.box_card {
.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/index.js
浏览文件 @ ed052ae9
......@@ -7,12 +7,9 @@ const routes = [
path: '',
component: () => import('./views/Index.vue')
},
{
path: 'tool',
component: () => import('./views/Tool.vue')
},
{
path: 'mail',
path: '/market-tools/mail',
component: () => import('./views/Mail.vue')
}
]
......
src/modules/market-tools/views/Index.vue
浏览文件 @ ed052ae9
......@@ -4,17 +4,23 @@
<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' : ''"
> -->
<li
@click="selectList(index)"
v-for="(item, index) in list"
:key="index"
:class="listIndex === index ? 'active' : ''"
>
<img :src="listIndex === index ? item.iconActive : item.icon" />
<img :src="item.icon" />
<div class="text">{{ item.text }}</div>
</li>
</ul>
<div class="confirm-btn" @click="$router.push({ path: '/market-tools/tool' })">选好了</div>
<div class="confirm-btn" @click="handleTool">选好了</div>
</div>
</div>
</div>
......@@ -28,30 +34,25 @@ export default {
listIndex: 2,
list: [
{
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',
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool_video.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',
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool_email.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',
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool_app.png',
text: 'APP营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool_info.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',
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool_wechat.png',
text: '微信提醒营销'
}
]
......@@ -59,12 +60,12 @@ export default {
},
methods: {
selectList(n) {
console.log(n, 'nnnn')
if (n === 9) {
// this.$router.push('/')
this.listIndex = n
},
handleTool() {
if (this.listIndex === 1) {
this.$router.push('/market-tools/mail')
}
// if (n === 2) return
// this.$message('暂未开通')
}
}
}
......@@ -94,40 +95,39 @@ export default {
li {
width: 180px;
height: 96px;
background: #f5f5f5;
border-radius: 6px;
background: rgba(255, 255, 255, 0.39);
border: 1px solid #e8e8e8;
opacity: 1;
border-radius: 10px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
// margin: 0 10px 10px 0;
margin: 0 45px 10px 24px;
cursor: pointer;
margin: 0 10px 10px 0;
&.active {
background: #68b8a4;
.text {
color: #fff;
}
}
img {
margin-left: 16px;
border: 1px solid #49bba2;
box-shadow: 0px 3px 18px rgba(51, 51, 51, 0.15);
}
.text {
font-size: 14px;
color: #797979;
line-height: 24px;
margin-left: 14px;
}
}
}
.confirm-btn {
width: 119px;
background: #68b8a4;
height: 32px;
background: #49bba2;
border-radius: 16px;
margin: 0 auto;
position: absolute;
left: 221px;
bottom: -50px;
text-align: center;
font-size: 18px;
color: #ffffff;
line-height: 32px;
cursor: pointer;
color: #ffffff;
}
}
}
......
src/modules/market-tools/views/Mail.vue
浏览文件 @ ed052ae9
<template>
<div>
<ToolCard></ToolCard>
<ToolCard class="main_content">
<Step :activeStep="activeStep" />
<div>
<MailStepOne v-if="activeStep === 0" />
<MailStepTwo v-if="activeStep === 1" />
<div class="main_content_btn">
<div class="step_prev step_btn" @click="handlePrev" :disabled="activeStep === 0">上一步</div>
<div class="step_next step_btn" @click="handleNext">下一步</div>
<div class="step_finished step_btn" @click="handlePreview">点击生成预览</div>
</div>
</div>
</ToolCard>
</div>
</template>
<script>
import ToolCard from '@components/base/ToolCard.vue'
import ToolCard from '@/components/base/ToolCard.vue'
import MailStepOne from '../components/mail/MailStepOne.vue'
import Step from '@/components/base/Step.vue'
import MailStepTwo from '../components/mail/MailStepTwocopy.vue'
export default {
components: {
ToolCard
ToolCard,
MailStepOne,
Step,
MailStepTwo
},
data() {
return {
activeStep: 0
}
},
methods: {
// 上一步
handlePrev() {
this.activeStep--
},
// 下一步
handleNext() {
this.activeStep++
},
// 点击生成预览
handlePreview() {}
}
}
</script>
<style lang="scss" scoped>
.main_content {
display: flex;
padding: 42px 39px 52px 63px;
// overflow: scroll;
.main_content_btn {
display: flex;
justify-content: center;
.step_btn {
width: 119px;
height: 32px;
background: #49bba2;
opacity: 1;
border-radius: 16px;
font-size: 18px;
line-height: 32px;
color: #ffffff;
text-align: center;
margin-right: 10px;
margin-top: 200px;
}
}
}
</style>
src/modules/market-tools/views/Tool.vue deleted 100644 → 0
浏览文件 @ 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' : ''"
>
<div class="icon-box">
<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> -->
<Email />
</div>
</div>
</template>
<script>
import Email from '../components/Email.vue'
// import DouYin from '../components/DouYin.vue'
export default {
components: { Email },
data() {
return {
listIndex: 9,
list: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
text: '搜索引擎优化'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon2.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-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-icon4.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon4.png',
text: '社交媒体营销'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
text: '智能推荐'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon6.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon6.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-icon8.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon8.png',
text: 'SOLOMO'
},
{
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-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-icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
text: '全渠道营销'
}
]
}
},
methods: {
selectList(n) {
if (n === 2) return
this.$message('暂未开通')
}
}
}
</script>
<style lang="scss" scoped>
.tool-box {
display: flex;
padding: 25px 30px 30px;
.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 {
width: 220px;
height: 58px;
display: flex;
align-items: center;
margin: 0 auto;
cursor: pointer;
&.active {
background: #68b8a4;
.text {
color: #fff;
}
}
.icon-box {
width: 50px;
margin-left: 40px;
}
.text {
font-size: 14px;
color: #666666;
}
}
}
.right-content {
flex: 1;
background: #fff;
margin-left: 30px;
padding: 30px;
box-sizing: border-box;
}
}
</style>
src/utils/stepOne.js 0 → 100644
浏览文件 @ ed052ae9
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论