product.vue
<template>
<div class="container">
<el-row>
<el-col class="menu-box" :span="6">
<p></p>
<el-menu
class="menu"
:default-active="$route.path"
router
background-color="#fff"
text-color="#267943"
active-text-color="#000">
<el-menu-item v-for="(item, index) in productclass"
:index="'/product/'+item.class"
:key="'/product/'+item.class"
v-text="item.name">
</el-menu-item>
</el-menu>
</el-col>
<!-- 右边主要内容 -->
<el-col :span="18">
<!-- 搜索框 -->
<el-input
type="text"
class="el-input"
placeholder="请输入商品名"
v-model="searchName">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<el-button
type="primary"
:disabled="disabled"
@click="search"
:loading="loading">
搜索
</el-button>
<!-- 商品列表渲染的地方 -->
<transition name="el-zoom-in-center">
<router-view :key="key"></router-view>
</transition>
</el-col>
</el-row>
</div>
</template>
<script>
import {SearchProductList} from '../../api/api'
export default {
data () {
return {
searchName: '',
isactive: false,
loading: false,
productclass: [
{
class: 'all',
name: '全部商品'
},
{
class: 'pomegranate',
name: '石榴'
},
{
class: 'pine',
name: '松子'
},
{
class: 'ham',
name: '火腿'
},
{
class: 'other',
name: '其它商品'
}
]
}
},
computed: {
key () {
return this.$route.params.class + new Date()
},
disabled () {
if (this.searchName === '') {
return true
} else {
return false
}
}
},
methods: {
search () {
this.loading = true
let searchparams = this.searchName
SearchProductList(searchparams).then(res => {
this.loading = false
if (res.data.code === 200) {
this.$router.push({
path: '/product/search',
query: {name: this.searchName}
})
} else {
this.$notify({
title: '很抱歉',
message: res.data.msg,
type: 'warning',
offset: 200
})
this.$router.push('/product/all')
}
})
}
}
}
</script>
<style scoped>
.el-input {
margin: 20px 0;
width: 70%;
}
.el-button {
width: 25%;
margin-right: 5px;
}
.menu {
position: fixed;
width: 200px;
top: 150px;
left: 50px;
box-shadow: 0 0 6px #ccc;
}
.is-active {
background: #669966 !important;
/* border-bottom: 3px solid #66CC00 !important; */
color: #fff !important;
font-weight: bold !important;
}
@media screen and (max-width: 767px) {
.menu {
position: fixed;
width: 25%;
top: 100px;
left: 5px;
box-shadow: 0 0 6px #ccc;
}
.is-active {
background: #669966 !important;
/* border-bottom: 3px solid #66CC00 !important; */
color: #fff !important;
font-weight: bold !important;
}
}
</style>
productlist.vue
<template>
<div>
<div class="title">
<h1 v-text="$route.params.class"></h1>
</div>
<!-- <p>共{{productlist.length}}个商品</p> -->
<ul>
<template v-for="(item, index) in productlist">
<el-row class="item" :key="item.productclass">
<router-link
:to="'/product/'+item.productclass+'/'+item.productname"
:key="item.productclass">
<el-col :span="8">
<img :src="item.productimage" >
</el-col>
</router-link>
<el-col :span="16">
<h3>{{item.productname}}</h3>
<p class="intro">{{item.productintro}}</p>
<router-link
:to="'/product/'+item.productclass+'/'+item.productname"
:key="item.productclass">
<p class="link">了解详情...</p>
</router-link>
<p class="sellnum">累计发货<span>{{item.productsells}}</span>件</p>
<p class="price">全国包邮价<span>{{item.productprice}}</span>元</p>
<!-- <el-input-number size="mini" v-model="addnum"></el-input-number> -->
</el-col>
</el-row>
</template>
</ul>
</div>
</template>
<script>
import {GetProductList, SearchProductList} from '../../../api/api'
export default {
data () {
return {
productlist: [],
addnum: 0
}
},
// methods: {
// formatClass () {
// if (this.$route.params.class === 'all' || 'ham' || 'ham' || 'ham') {
// }
// }
// },
mounted () {
if (this.$route.query.name) {
// 获取查询列表
// console.log(this.$route.query.name)
let searchparams = this.$route.query.name
SearchProductList(searchparams).then(res => {
// console.log(res)
if (res.data.code === 200) {
this.productlist = res.data.searchRes
} else {
this.$notify({
title: '很抱歉',
message: res.data.msg,
type: 'warning',
offset: 200
})
this.$router.push('/product/all')
}
})
} else {
// 获取分类列表
let params = null
if (this.$route.params.class === 'all') {
params = ''
} else {
params = this.$route.params.class
}
GetProductList(params).then(res => {
// console.log(res)
this.productlist = res.data.productlist
})
}
}
}
</script>
<style scoped>
a {
text-decoration: none;
color: #999;
}
a:hover {
color: #669966;
}
.title {
height: 60px;
border-left: 4px solid #669966;
margin: 0 15px;
background-color: #f2f3f2;
text-align: left;
padding-left:20px;
line-height: 60px;
}
ul {
padding: 0;
margin: 0 15px;
}
.item {
margin: 25px 0;
/* background: #f2f3f2; */
box-shadow: 0 0 30px #ccc;
border-radius: 15px;
}
.item:hover {
/* border: 1px solid silver; */
background: #eee;
}
img {
width: 100%;
max-width: 500px;
padding: 10px;
border-radius: 15px;
}
.intro,.price,.sellnum {
margin: 0 15px 0 25px;
text-align: left;
color: #666;
line-height: 2;
letter-spacing: 1.2;
}
.link {
text-align: right;
font-size: 16px;
margin-right: 40px;
}
.price,.sellnum {
color: gray;
}
.price span {
color: red;
font-size: 25px;
}
</style>
productcontent.vue
<template>
<div>
<h1>productcontent.vue</h1>
<p>{{$route.params.class}}</p>
<p>{{$route.params.productname}}</p>
<div>
<h2 v-text="product.productname"></h2>
<p>价格：{{product.productprice}}元</p>
<p>销量：{{product.productsells}}</p>
<img :src="product.productimage">
<p>{{product.productintro}}</p>
</div>
</div>
</template>
<script>
import {GetProduct} from '../../../api/api'
export default {
data () {
return {
product: {}
}
},
mounted () {
let params = {
productname: this.$route.params.productname,
productclass: this.$route.params.class
}
GetProduct(params).then(res => {
// console.log(res)
this.product = res.data.curproduct
})
}
}
</script>
效果
GIF6.gif
总结
样式的写法那就多种多样了，这个就是随便写一下，如果是这要写商品页面的话可以参考很多商城的样式，也可以加很多效果，我这个写得更像文章页面
element-ui 修改样式
比如修改element-ui的导航菜单active样式，先查看元素，在菜单被选中的时候会多一个is-active的class，所以只要修改这个is-active就可以了，但要注意写在scope里面需要在后面加一个！important
