Browse Source

按钮样式

master
我叫MT 1 year ago
parent
commit
23ff504168
3 changed files with 18 additions and 11 deletions
  1. +2
    -2
      src/components/header.vue
  2. +9
    -6
      src/views/home/index.vue
  3. +7
    -3
      src/views/information/index.vue

+ 2
- 2
src/components/header.vue View File

@@ -1,6 +1,6 @@
<template> <template>
<el-menu <el-menu
:default-active="activeIndex"
:default-active="this.$route.path"
class="el-menu-demo" class="el-menu-demo"
mode="horizontal" mode="horizontal"
background-color="#00000063" background-color="#00000063"
@@ -15,7 +15,7 @@ export default {
name: 'yqheaders', name: 'yqheaders',
data () { data () {
return { return {
activeIndex: '/',
activeIndex: this.$route.path,
layers: [ layers: [
{ path: '/', name: '首页' }, { path: '/', name: '首页' },
{ path: '/information', name: '汽车资讯' }, { path: '/information', name: '汽车资讯' },


+ 9
- 6
src/views/home/index.vue View File

@@ -45,7 +45,7 @@
<p class="content">{{ item.news.detailText }}</p> <p class="content">{{ item.news.detailText }}</p>
</div> </div>
<div class="btn"> <div class="btn">
<el-button plain class="more" size="small" @click="routerToMate">MORE</el-button>
<el-button plain class="more more1" size="small" @click="routerToMate">MORE</el-button>
</div> </div>
</div> </div>
<div class="yyzrbimg lr" > <div class="yyzrbimg lr" >
@@ -210,9 +210,6 @@ export default {
#hot, #daliay { #hot, #daliay {
width: 100%; width: 100%;
background: #E3E5EA; background: #E3E5EA;
// display: flex;
// align-items: center;
// justify-content: center;
padding: 25px 0; padding: 25px 0;
.content { .content {
width: 1200px; width: 1200px;
@@ -315,8 +312,6 @@ export default {
position: relative; position: relative;
text-align: left; text-align: left;
.more { .more {
// position: absolute;
// left: 0px;
background: none !important; background: none !important;
border: 1px solid #00F6BD; border: 1px solid #00F6BD;
opacity: 0.8; opacity: 0.8;
@@ -324,6 +319,10 @@ export default {
color: #00F6BD; color: #00F6BD;
margin-top: 30px; margin-top: 30px;
} }
.more:hover {
border: 1px solid #088669;
color: #088669;
}
} }
} }
} }
@@ -405,6 +404,10 @@ export default {
border-radius: 4px; border-radius: 4px;
width: 80px; width: 80px;
} }
.more1:hover {
border: 1px solid #202020;
color: #202020;
}
} }
} }
.yyzrbimg { .yyzrbimg {


+ 7
- 3
src/views/information/index.vue View File

@@ -31,7 +31,7 @@
<div class="content"> <div class="content">
<div class="htitle"> <div class="htitle">
<a class="tle">汽车文章</a> <a class="tle">汽车文章</a>
<el-button type="text" @click="routerTo">MORE+</el-button>
<el-button type="text" class="more" @click="routerTo">MORE+</el-button>
</div> </div>
<div id="hotList"> <div id="hotList">
<div class="list" v-for="(item, index) in carList" :key="index" @click="routerToarticleDetails(item.detail)"> <div class="list" v-for="(item, index) in carList" :key="index" @click="routerToarticleDetails(item.detail)">
@@ -87,7 +87,7 @@ export default {
}, },
methods: { methods: {
handleChange(newIndex) { handleChange(newIndex) {
this.currentIndex = newIndex;
this.currentIndex = newIndex;
}, },
routerToarticleDetails (value) { routerToarticleDetails (value) {
localStorage.setItem('article', value) localStorage.setItem('article', value)
@@ -258,6 +258,10 @@ export default {
cursor: pointer; cursor: pointer;
z-index: 9999; z-index: 9999;
} }
.more:hover {
border: 1px solid #088669;
color: #088669;
}
} }
} }
#hotList { #hotList {
@@ -349,7 +353,7 @@ export default {
.carvideoShadow{ .carvideoShadow{
box-shadow: 0 2px 12px 0 #666; box-shadow: 0 2px 12px 0 #666;
margin: 12px; margin: 12px;
}
}
.carvideo { .carvideo {
position: relative; position: relative;
position: relative; position: relative;


Loading…
Cancel
Save