提交 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 = [ ...@@ -10,6 +10,10 @@ const routes = [
{ {
path: 'tool', path: 'tool',
component: () => import('./views/Tool.vue') component: () => import('./views/Tool.vue')
},
{
path: 'mail',
component: () => import('./views/Mail.vue')
} }
] ]
} }
......
...@@ -23,67 +23,36 @@ export default { ...@@ -23,67 +23,36 @@ export default {
listIndex: 2, listIndex: 2,
list: [ list: [
{ {
icon: '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-icon1.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon1.png',
text: '搜索引擎优化' text: '搜索引擎优化'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon2.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon2.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon2.png',
text: '搜索引擎营销' text: '搜索引擎营销'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon3.png', icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon3.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon-a3.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon3.png',
text: '视频营销' text: '视频营销'
}, },
{ {
icon: '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-icon4.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon4.png',
text: '社交媒体营销' text: '社交媒体营销'
}, },
{ {
icon: '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-icon5.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-new-icon5.png',
text: '智能推荐' 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: { methods: {
selectList(n) { selectList(n) {
if (n === 2) return this.listIndex = n
this.$message('暂未开通')
} }
} }
} }
...@@ -93,46 +62,57 @@ export default { ...@@ -93,46 +62,57 @@ export default {
.market-tools{ .market-tools{
.tool-main{ .tool-main{
background: #fff; background: #fff;
padding-bottom: 11px; padding: 10px 0 50px 0;
border-radius: 16px;
.tool-bg{ .tool-bg{
position: relative; position: relative;
width: 1254px; width: 1112px;
height: 559px; 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: 708px; width: 600px;
position: absolute; position: absolute;
top: 166px; top: 166px;
left: 282px; left: 270px;
ul{ ul{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
li{ li{
width: 167px; width: 180px;
height: 76px; height: 96px;
background: #F5F5F5; background: rgba(255, 255, 255, 0.39);
border-radius: 6px; border: 1px solid #E8E8E8;
display: flex; opacity: 1;
align-items: center; border-radius: 10px;
margin: 0 10px 10px 0; margin: 0 20px 20px 0;
text-align: center;
position: relative;
cursor: pointer; cursor: pointer;
&.active{ &.active{
background: #68B8A4; border-color: rgba(73, 187, 162, 1);
box-shadow: 0px 3px 18px rgba(51, 51, 51, 0.15);
// background: #68B8A4;
.text{ .text{
color: #fff; // color: #fff;
} }
} }
img{ img{
margin-left: 16px; margin-top: 20px;
// margin-left: 16px;
} }
.text{ .text{
font-size: 14px; position: absolute;
color: #797979; bottom: 15px;
line-height: 24px; left: 0;
margin-left: 14px; width: 100%;
font-size: 16px;
color: #333333;
line-height: 100%;
// margin-top: 18px;
// margin-left: 14px;
} }
} }
} }
...@@ -140,7 +120,7 @@ export default { ...@@ -140,7 +120,7 @@ export default {
width: 119px; width: 119px;
background: #68B8A4; background: #68B8A4;
border-radius: 16px; border-radius: 16px;
margin: 34px auto 0; margin: 0 auto;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
color: #FFFFFF; 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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论