mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 18:26:38 +08:00
1219 lines
26 KiB
Vue
1219 lines
26 KiB
Vue
<template>
|
||
<div>
|
||
<Myheader></Myheader>
|
||
|
||
<div class="rc-top">
|
||
<div class="online" style="height:2px;width:100%;background:#DDDDDD;margin-top:0.23rem"></div>
|
||
<div class="rc-main">
|
||
<div class="usersearch">
|
||
|
||
|
||
<div class="usercontentshow" ref="usercontent">
|
||
<div class="rc-product">
|
||
<div class="rc-productcat">
|
||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
|
||
<img :src="item.catimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rc-prefecture">
|
||
<h2>专区:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="rc-age">
|
||
<h2>年龄:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<div class="rc-age">
|
||
<h2>功能:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="rc-age">
|
||
<h2>品种:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
|
||
<div class="rc-contair">
|
||
<ul>
|
||
<li v-for="(item,index) in rccontair" :key="index">
|
||
<div class="rc-click" @click="selectproduce(item)">
|
||
<div class="rc-rccontair">
|
||
<img :src=item.picture alt="">
|
||
</div>
|
||
<span>{{item.categoryName}}</span>
|
||
<i>{{item.price}}</i>
|
||
</div>
|
||
<strong @click="userbuy()">立即购买</strong>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="online" style="height:2px;width:100%;background:#DDDDDD;margin-top:0.23rem"></div>
|
||
</div>
|
||
|
||
|
||
<div class="usershow" v-if="openshow">
|
||
<div class="rc-show">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div v-if="isadrond">
|
||
<div class="rc-mubu" v-if="isshow" @click="usershow()">
|
||
</div>
|
||
<div class="rc-bottom" v-if="isshow">
|
||
<div class="rc-bottoma" >
|
||
<div class="rc-productcat">
|
||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
||
<img :src="item.catimage" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="rc-prefecture">
|
||
<h2>专区:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="rc-age">
|
||
<h2>年龄:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<div class="rc-age">
|
||
<h2>功能:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="rc-age">
|
||
<h2>品种:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<div class="rc-footer">
|
||
|
||
<span @click="usershow()">取消</span>
|
||
<em @click="usershow()">确定</em>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog
|
||
:visible.sync="dialogInfo1"
|
||
hegight="700px"
|
||
|
||
v-if="!isadrond"
|
||
>
|
||
|
||
<div class="rc-bottom">
|
||
<div class="rc-bottoma" >
|
||
<div class="rc-productcat">
|
||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
||
<img :src="item.name" alt="" />
|
||
<span>{{ item.title }}</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="rc-prefecture">
|
||
<h2>专区:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="rc-age">
|
||
<h2>年龄:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
<div class="rc-age">
|
||
<h2>功能:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="rc-age">
|
||
<h2>品种:</h2>
|
||
<ol>
|
||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rc-button">
|
||
<span @click="openclose()">取消</span>
|
||
<em>确认</em>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from '~/components/header.vue'
|
||
import { userstype,biaomessa,biaomessage } from "../../ajax/getData";
|
||
export default {
|
||
data() {
|
||
return {
|
||
value: "",
|
||
activeIndex:0,
|
||
activeIndex1:0,
|
||
activeIndexa:'-1',
|
||
dialogInfo1:false,
|
||
activeIndexb:'-1',
|
||
activeIndexc:'-1',
|
||
activeIndexd:'-1',
|
||
activeIndexe:'-1',
|
||
activeIndexf:'-1',
|
||
isadrond:true,
|
||
isshow:false,
|
||
openshow:false,
|
||
direction:'btt',
|
||
searchdata: [
|
||
{
|
||
title: "猫罐头",
|
||
ordernum: "1",
|
||
},
|
||
|
||
{
|
||
title: "犬罐头",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "布偶猫",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: "博美犬",
|
||
ordernum: "4",
|
||
},
|
||
],
|
||
|
||
userproduct: [
|
||
{
|
||
title: "猫产品",
|
||
ordernum: "1",
|
||
catimage: require("../../assets/image/rc-cat.png"),
|
||
},
|
||
|
||
{
|
||
title: "犬产品",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
],
|
||
|
||
catproduct: [
|
||
{
|
||
title: "猫产品",
|
||
ordernum: "1",
|
||
catimage: require("../../assets/image/rc-cat.png"),
|
||
},
|
||
|
||
{
|
||
title: "犬产品",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
],
|
||
|
||
prefecture: [
|
||
{
|
||
title: "猫湿粮",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "品种猫粮",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "营养猫粮",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "功能猫粮",
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
],
|
||
catage: [
|
||
{
|
||
title: "<4月龄",
|
||
ordernum: "1",
|
||
},
|
||
{
|
||
title: "4-12月龄",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "1-7岁",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: ">7岁",
|
||
ordernum: "4",
|
||
},
|
||
],
|
||
catagea: [
|
||
{
|
||
title: "绝育呵护",
|
||
ordernum: "1",
|
||
},
|
||
{
|
||
title: "口腔呵护",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "美毛呵护",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: "去毛球",
|
||
ordernum: "4",
|
||
},
|
||
],
|
||
catageb: [
|
||
{
|
||
title: "英短",
|
||
ordernum: "1",
|
||
},
|
||
{
|
||
title: "美短",
|
||
ordernum: "2",
|
||
},
|
||
{
|
||
title: "布偶",
|
||
ordernum: "3",
|
||
},
|
||
{
|
||
title: "暹罗",
|
||
ordernum: "4",
|
||
},
|
||
],
|
||
|
||
rccontair: [
|
||
{
|
||
title: "皇家英国短毛猫全价湿粮",
|
||
price:'￥123.45',
|
||
ordernum: 1,
|
||
|
||
catimage: require("../../assets/image/rc-cat.png"),
|
||
},
|
||
|
||
{
|
||
title: "皇家英国短毛猫全价湿粮",
|
||
price:'￥123.45',
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "皇家英国短毛猫全价湿粮",
|
||
price:'￥123.45',
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "皇家英国短毛猫全价湿粮",
|
||
price:'￥123.45',
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
{
|
||
title: "皇家英国短毛猫全价湿粮",
|
||
price:'￥123.45',
|
||
ordernum: "2",
|
||
catimage: require("../../assets/image/rc-dog.png"),
|
||
},
|
||
],
|
||
};
|
||
},
|
||
components: {
|
||
Myheader,
|
||
},
|
||
mounted(){
|
||
|
||
let stype=this.$route.query.stype;
|
||
this.activeIndex=stype;
|
||
console.log(stype);
|
||
if(stype!==''&&stype!==undefined){
|
||
this.onmessage(stype)
|
||
}else{
|
||
this.usetmessage();
|
||
}
|
||
|
||
|
||
},
|
||
methods: {
|
||
async usetmessage() {
|
||
let data = await biaomessa();
|
||
if(data){
|
||
this.rccontair=data;
|
||
}
|
||
console.log( this.rccontair);
|
||
},
|
||
async onmessage(stype) {
|
||
let data = await biaomessage(stype);
|
||
if(data){
|
||
this.rccontair=data;
|
||
}
|
||
console.log( this.rccontair);
|
||
},
|
||
|
||
|
||
|
||
|
||
userbuy(){
|
||
this.$router.push({
|
||
path: "/myorder/userrecord",
|
||
query: {
|
||
stype: 1,
|
||
},
|
||
});
|
||
},
|
||
openclose(){
|
||
this.dialogInfo1=false;
|
||
},
|
||
selectproduce(){
|
||
this.$router.push({
|
||
path: "/productdetails/producted",
|
||
query: {
|
||
stype: 1,
|
||
},
|
||
});
|
||
},
|
||
ifadroind(){
|
||
var sUserAgent = navigator.userAgent.toLowerCase();
|
||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
||
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
||
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
||
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||
|
||
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||
console.log("当前是电脑打开")
|
||
this.$nextTick(() => {
|
||
|
||
this.isadrond=false;
|
||
this.dialogInfo1=true;
|
||
this.isadrond=false;
|
||
this.isshow=false;
|
||
|
||
})
|
||
|
||
|
||
}else{
|
||
console.log("当前是手机打开")
|
||
this.$nextTick(() => {
|
||
|
||
this.isadrond=true;
|
||
this.isshow=true;
|
||
this.$refs.usercontent.style.display='none ';
|
||
this.dialogInfo1=false;
|
||
|
||
})
|
||
|
||
|
||
}
|
||
},
|
||
//搜索
|
||
onSearch() {},
|
||
selectGoods(item, index) {
|
||
|
||
this.activeIndex=index;
|
||
console.log('----');
|
||
},
|
||
selectGoodsa(item, index) {
|
||
|
||
this.activeIndex1=index;
|
||
console.log('----');
|
||
},
|
||
userselect(){
|
||
this.$nextTick(() => {
|
||
|
||
this.ifadroind();
|
||
console.log( this.$refs.usercontent)
|
||
|
||
})
|
||
},
|
||
usershow(){
|
||
this.$nextTick(() => {
|
||
this.isshow=false;
|
||
// dom元素更新后执行，因此这里能正确打印更改之后的值
|
||
this.$refs.usercontent.style.display='block ';
|
||
})
|
||
},
|
||
|
||
selectsearch(item, index) {
|
||
|
||
this.activeIndexa=index;
|
||
},
|
||
selectage(item, index) {
|
||
this.activeIndexc=index;
|
||
},
|
||
selectagc(item, index) {
|
||
this.activeIndexd=index;
|
||
},
|
||
selectagd(item, index) {
|
||
this.activeIndexe=index;
|
||
},
|
||
selectproduct(item, index){
|
||
this.activeIndexb=index;
|
||
},
|
||
selectage(item, index) {
|
||
this.activeIndexc=index;
|
||
},
|
||
selectage(item, index) {
|
||
this.activeIndexc=index;
|
||
},
|
||
//弹框的显示隐藏
|
||
},
|
||
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped >
|
||
.rc-top{
|
||
position: relative;
|
||
}
|
||
|
||
/deep/ .el-drawer{
|
||
height: 60%;
|
||
}
|
||
ul li ol li em strong i {
|
||
list-style: none;
|
||
font-style: normal;
|
||
|
||
}
|
||
.rc-main {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
margin-top:40px;
|
||
|
||
.usersearch {
|
||
width: 93%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
}
|
||
.active{
|
||
border: 2px solid #E2001A;
|
||
color: #E2001A;
|
||
cursor: pointer;
|
||
}
|
||
.unactive{
|
||
border: 2px solid #d7d7d7;
|
||
color:#999999;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
//手机端
|
||
@media screen and (max-width: 768px) {
|
||
.rc-top{
|
||
position: relative;
|
||
margin-top: 74px;
|
||
}
|
||
.usercontentshow{
|
||
position: relative;
|
||
z-index: 997;
|
||
}
|
||
.rc-mubu{
|
||
height: 100%;
|
||
background: #333333;
|
||
opacity: 0.6;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
z-index: 998;
|
||
|
||
}
|
||
.rc-bottom{
|
||
.rc-footer{
|
||
position: absolute;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
span{
|
||
width: 155px;
|
||
height: 48px;
|
||
border: 2px solid #E1001A;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: #E1001A;
|
||
border-radius: 30px;
|
||
|
||
}
|
||
em{
|
||
width: 155px;
|
||
margin-left: 25px;
|
||
height: 48px;
|
||
background: #E2001A;
|
||
border-radius: 30px;
|
||
font-size: 14px;
|
||
color:#FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
font-style: normal;
|
||
justify-content: center;
|
||
list-style: none;
|
||
}
|
||
}
|
||
.rc-cat{
|
||
margin-top: 24px;
|
||
}
|
||
.active{
|
||
border: 2px solid #E2001A;
|
||
color: #E2001A;
|
||
cursor: pointer;
|
||
|
||
}
|
||
.unactive{
|
||
border: 2px solid #d7d7d7;
|
||
color:#999999;
|
||
cursor: pointer;
|
||
|
||
}
|
||
position: relative;
|
||
height: 100%;
|
||
height: 617px;
|
||
background: white;
|
||
z-index: 999;
|
||
.rc-productcat {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
.rc-cat {
|
||
width: 32%;
|
||
height: 34px;
|
||
background: #ffffff;
|
||
border-radius: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16px;
|
||
font-size: 14px;
|
||
span {
|
||
margin-left: 3px;
|
||
}
|
||
|
||
img {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
/deep/ .van-search__content {
|
||
width: 250px;
|
||
height: 32px;
|
||
border: 1px solid #d7d7d7;
|
||
border-radius: 200px;
|
||
background: white;
|
||
}
|
||
.rc-search {
|
||
width: 69px;
|
||
height: 32px;
|
||
background: #e1001a;
|
||
border-radius: 200px;
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
.rc-title {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 auto;
|
||
color: #333333;
|
||
margin-top: 12px;
|
||
h2 {
|
||
font-size: 18px;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
border-bottom: 1px solid #666666;
|
||
display: block;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.rc-variety {
|
||
ul {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
|
||
}
|
||
ul li {
|
||
width: 80px;
|
||
height: 32px;
|
||
background: #ffffff;
|
||
border: 1px solid #d7d7d7;
|
||
border-radius: 100px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
float: left;
|
||
line-height: 32px;
|
||
margin-left: 11px;
|
||
}
|
||
}
|
||
.rc-product {
|
||
h2 {
|
||
font-size: 18px;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
}
|
||
.rc-productcat {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
.rc-cat {
|
||
width: 32%;
|
||
height: 34px;
|
||
background: #ffffff;
|
||
border-radius: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16px;
|
||
font-size: 14px;
|
||
span {
|
||
margin-left: 3px;
|
||
}
|
||
|
||
img {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.rc-productright {
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
width: 24px;
|
||
height: 20px;
|
||
margin-left: 15px;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
.rc-prefecture{
|
||
display: flex;
|
||
h2{
|
||
font-size: 16px;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
ol{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
width: 80%;
|
||
}
|
||
li{
|
||
width: 40%;
|
||
height: 26px;
|
||
background: #FFFFFF;
|
||
border: 1px solid #D7D7D7;
|
||
line-height: 26px;
|
||
float: left;
|
||
border-radius: 100px;
|
||
margin-left: 9px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.rc-age{
|
||
display: flex;
|
||
h2{
|
||
font-size: 16px;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
ol{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
width: 80%;
|
||
}
|
||
li{
|
||
width: 40%;
|
||
height: 26px;
|
||
background: #FFFFFF;
|
||
border: 1px solid #D7D7D7;
|
||
line-height: 26px;
|
||
float: left;
|
||
border-radius: 100px;
|
||
margin-left: 9px;
|
||
|
||
}
|
||
}
|
||
.rc-contair{
|
||
margin-top: 24px;
|
||
.rc-rccontair{
|
||
height:160px;display:flex;align-items: center
|
||
}
|
||
ul{
|
||
text-align: center;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
li{
|
||
float: left;
|
||
width: 43%;
|
||
margin-top: 16px;
|
||
background: #FFFFFF;
|
||
border: 1px solid #D7D7D7;
|
||
margin-left: 15px;
|
||
display: inline-flex;
|
||
border-radius: 3px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
img{
|
||
width: 85px;
|
||
display: flex;
|
||
margin: 0 auto;
|
||
height: 114px
|
||
;
|
||
}
|
||
i{
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
margin-top: 8px;
|
||
color: #666666;
|
||
display: block;
|
||
|
||
}
|
||
}
|
||
.rc-click{
|
||
max-height: 1.9rem;
|
||
min-height: 1.9rem;
|
||
}
|
||
span{
|
||
font-size: 0.16rem;
|
||
color: #666666;
|
||
text-overflow: -o-ellipsis-lastline;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
word-break: break-all;
|
||
white-space: normal;
|
||
}
|
||
strong{
|
||
width: 130px;
|
||
height: 40px;
|
||
border: 2px solid #E2001A;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 30px;
|
||
margin: 0 auto;
|
||
font-size: 14px;
|
||
color: #E2001A;
|
||
margin-top: 8px;
|
||
margin-bottom: 32px;
|
||
}
|
||
}
|
||
}
|
||
|
||
//pc端
|
||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||
/deep/.el-dialog {
|
||
width: 920px;
|
||
height: 570px;
|
||
background: #FFFFFF;
|
||
}
|
||
.rc-button{
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
width: 100%;
|
||
padding: 40px 0 40px 0;
|
||
span{
|
||
width: 160px;
|
||
height: 48px;
|
||
border: 2px solid #E2001A;
|
||
border-radius: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #E2001A;
|
||
cursor: pointer;
|
||
}
|
||
em{
|
||
font-style: normal;
|
||
width: 164px;
|
||
height: 48px;
|
||
background: #E2001A;
|
||
cursor: pointer;
|
||
border-radius: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #FFFFFF;
|
||
margin-left: 40px;
|
||
}
|
||
}
|
||
.rc-bottom{
|
||
.rc-cat{
|
||
margin-top: 24px;
|
||
}
|
||
.active{
|
||
border: 2px solid #E2001A;
|
||
color: #E2001A;
|
||
cursor: pointer;
|
||
|
||
}
|
||
.unactive{
|
||
border: 2px solid #d7d7d7;
|
||
color:#999999;
|
||
cursor: pointer;
|
||
|
||
}
|
||
.rc-productcat {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
.rc-cat {
|
||
width: 237px;
|
||
height: 48px;
|
||
border-radius: 30px;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16px;
|
||
font-size: 14px;
|
||
span {
|
||
margin-left: 3px;
|
||
}
|
||
|
||
img {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
.form-search {
|
||
display: none;
|
||
}
|
||
.rc-title {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 auto;
|
||
color: #333333;
|
||
margin-top: 12px;
|
||
h2 {
|
||
font-size: 18px;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
border-bottom: 1px solid #666666;
|
||
display: block;
|
||
margin-right: 8px;
|
||
}
|
||
.rc-change{
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.rc-variety {
|
||
margin-top: 30px;
|
||
ul {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
|
||
|
||
}
|
||
ul li {
|
||
width: 80px;
|
||
height: 32px;
|
||
background: #ffffff;
|
||
border: 1px solid #d7d7d7;
|
||
border-radius: 100px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
// color: #999999;
|
||
float: left;
|
||
line-height: 32px;
|
||
margin-left: 11px;
|
||
}
|
||
}
|
||
.rc-product {
|
||
margin-top: 30px;
|
||
h2 {
|
||
font-size: 18px;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
}
|
||
.rc-productcat {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
.rc-cat {
|
||
width: 237px;
|
||
height: 48px;
|
||
border-radius: 30px;
|
||
background: #ffffff;
|
||
|
||
border-radius: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 16px;
|
||
font-size: 14px;
|
||
span {
|
||
margin-left: 3px;
|
||
}
|
||
|
||
img {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.rc-productright {
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
width: 24px;
|
||
height: 20px;
|
||
margin-left: 15px;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
.rc-prefecture{
|
||
display: flex;
|
||
margin-top: 47px;
|
||
h2{
|
||
font-size: 20px;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
ol{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
width: 80%;
|
||
}
|
||
li{
|
||
width: 130px;
|
||
height: 40px;
|
||
border: 2px solid #D7D7D7;
|
||
opacity: 1;
|
||
border-radius: 30px;
|
||
background: #FFFFFF;
|
||
line-height: 40px;
|
||
float: left;
|
||
margin-left: 40px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.rc-age{
|
||
display: flex;
|
||
|
||
h2{
|
||
font-size: 20px;
|
||
color: #333333;
|
||
margin-left: 12px;
|
||
}
|
||
ol{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
width: 80%;
|
||
}
|
||
li{
|
||
margin-left: 40px;
|
||
width: 130px;
|
||
height: 40px;
|
||
border: 2px solid #D7D7D7;
|
||
border-radius: 30px;
|
||
background: #FFFFFF;
|
||
line-height: 40px;
|
||
float: left;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.rc-contair{
|
||
margin-top: 40px;
|
||
ul{
|
||
text-align: center;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
li{
|
||
float: left;
|
||
width: 21%;
|
||
margin-top: 16px;
|
||
height: 560px;
|
||
background: #FFFFFF;
|
||
border: 1px solid #D7D7D7;
|
||
margin-left: 40px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
img{
|
||
width: 85px;
|
||
display: flex;
|
||
margin: 0 auto;
|
||
height: 114px
|
||
;
|
||
}
|
||
i{
|
||
font-style: normal;
|
||
font-size: 22px;
|
||
margin-top: 8px;
|
||
color: #666666;
|
||
display: block;
|
||
|
||
}
|
||
}
|
||
span{
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
-webkit-box-orient:vertical;
|
||
-webkit-line-clamp:2;
|
||
display: flex;
|
||
font-size: 30px;
|
||
color: #E2001A;
|
||
margin-top: 8px;
|
||
width: 256px;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
}
|
||
strong{
|
||
width: 134px;
|
||
height: 40px;
|
||
border: 2px solid #E2001A;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 30px;
|
||
margin: 0 auto;
|
||
font-size: 14px;
|
||
color: #E2001A;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.rc-rccontair{
|
||
height:320px;display:flex;align-items: center
|
||
}
|
||
}
|
||
}
|
||
</style> |