提交 b3bd3a80 authored 作者: lihuihui's avatar lihuihui

update

上级 d02098bd
<template>
<div></div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
</style>
<template>
<div></div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
</style>
......@@ -10,6 +10,10 @@ const routes = [
{
path: 'tool',
component: () => import('./views/Tool.vue')
},
{
path: 'mail',
component: () => import('./views/Mail.vue')
}
]
}
......
......@@ -23,67 +23,36 @@ export default {
listIndex: 2,
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',
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-icon2.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
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-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-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-icon4.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon4.png',
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-icon5.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
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-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('暂未开通')
this.listIndex = n
}
}
}
......@@ -93,46 +62,57 @@ export default {
.market-tools{
.tool-main{
background: #fff;
padding-bottom: 11px;
padding: 10px 0 50px 0;
border-radius: 16px;
.tool-bg{
position: relative;
width: 1254px;
height: 559px;
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: 708px;
width: 600px;
position: absolute;
top: 166px;
left: 282px;
left: 270px;
ul{
display: flex;
flex-wrap: wrap;
}
li{
width: 167px;
height: 76px;
background: #F5F5F5;
border-radius: 6px;
display: flex;
align-items: center;
margin: 0 10px 10px 0;
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;
cursor: pointer;
&.active{
background: #68B8A4;
border-color: rgba(73, 187, 162, 1);
box-shadow: 0px 3px 18px rgba(51, 51, 51, 0.15);
// background: #68B8A4;
.text{
color: #fff;
// color: #fff;
}
}
img{
margin-left: 16px;
margin-top: 20px;
// margin-left: 16px;
}
.text{
font-size: 14px;
color: #797979;
line-height: 24px;
margin-left: 14px;
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
font-size: 16px;
color: #333333;
line-height: 100%;
// margin-top: 18px;
// margin-left: 14px;
}
}
}
......@@ -140,7 +120,7 @@ export default {
width: 119px;
background: #68B8A4;
border-radius: 16px;
margin: 34px auto 0;
margin: 0 auto;
text-align: center;
font-size: 18px;
color: #FFFFFF;
......
<template>
<div>
<ToolCard></ToolCard>
</div>
</template>
<script>
import ToolCard from '@components/base/ToolCard.vue'
export default {
components: {
ToolCard
}
}
</script>
<style lang="scss" scoped>
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论