You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.4 KiB
136 lines
3.4 KiB
<template>
|
|
<div class="header">
|
|
<nav class="nav">
|
|
<ul>
|
|
<li class="on" v-if="false">
|
|
<router-link to="/">
|
|
首页
|
|
</router-link>
|
|
</li>
|
|
<li v-for="(item,index) in classifyData" :key="index" @click="jumpCategory(item)">
|
|
<div class="classify-item">
|
|
<img class="classify-img" :src="item.classifyImage">
|
|
<span class="classify-name" >{{item.categoryName}}</span>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="search" v-if="false">
|
|
<div class="searchSelect">
|
|
<el-dropdown trigger="click">
|
|
<span class="el-dropdown-link">{{ $t('common.beautiproduct') }}
|
|
<i class="el-icon-arrow-down cur-poi el-icon--right"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item command="宝贝">{{ $t('common.beautiproduct') }}</el-dropdown-item>
|
|
<el-dropdown-item command="店铺">{{ $t('common.beautishop') }}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
<div class="searchRight">
|
|
<input type="text" maxlength="20" :placeholder="$t('common.searchproducthint')">
|
|
</div>
|
|
<span class="btn cur-poi">
|
|
<i class="icon el-icon-search"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {commonMixin} from '../mixin'
|
|
export default {
|
|
mixins: [commonMixin],
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header{
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
.nav{
|
|
float: left;
|
|
padding-top: 30px;
|
|
ul{
|
|
width: 760px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
li{
|
|
font-size: 16px;
|
|
line-height: 21px;
|
|
padding-bottom: 24px;
|
|
color: #333;
|
|
cursor: pointer;
|
|
border-bottom: 3px solid #fff;
|
|
&.on,&:hover{
|
|
transform: scale(1.2);
|
|
}
|
|
.classify-item{
|
|
width: 126px;
|
|
height: 204px;
|
|
background: #F6F6F8;
|
|
box-shadow: 0rpx 12rpx 27rpx 0rpx #E2E2E2;
|
|
border-radius: 8rpx;
|
|
border: 1px solid #FFFFFF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.classify-img{
|
|
height: 100px;
|
|
}
|
|
|
|
.classify-name{
|
|
margin-top: 48px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: #252744;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.search{
|
|
width: 394px;
|
|
height: 39px;
|
|
border: 2px solid #F3F4F5;
|
|
float: right;
|
|
// margin-top: 21px;
|
|
display: flex;
|
|
.searchSelect{
|
|
width: 82px;
|
|
height: 30px;
|
|
margin-top: 2px;
|
|
border-right: 1px solid #CCCCCC;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
.el-dropdown{
|
|
color: #C5AA7B;
|
|
}
|
|
}
|
|
.searchRight{
|
|
flex: 1;
|
|
input{
|
|
padding-left: 15px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
line-height: 35px;
|
|
}
|
|
}
|
|
.btn{
|
|
font-size: 20px;
|
|
line-height: 35px;
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|