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.
957 lines
21 KiB
957 lines
21 KiB
<template>
|
|
<!--头部导航-->
|
|
<div v-if="$route.path !== '/login'">
|
|
<div class="header">
|
|
<div style="display: flex" class="top">
|
|
<div class="left" @click="goHome">
|
|
<div class="logo">
|
|
<img :src="siteLogo" alt />
|
|
</div>
|
|
<p>{{ siteName }}</p>
|
|
</div>
|
|
<div class="center">
|
|
<div class="ipt">
|
|
<el-input v-model="keyword" placeholder="请输入商品名称" clearable></el-input>
|
|
<div class="btn">
|
|
<img src="../assets/index/search.png" alt @click="searchGoods" />
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
<p>
|
|
<img src="../assets/index/hot.png" alt srcset />
|
|
热门搜索词：
|
|
</p>
|
|
<li v-for="(item, index) in hotList" :key="index" @click="hotHTML(item)">
|
|
{{ item }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 未登录 -->
|
|
<div class="right" v-if="!isSignin" @click="login">登录 | 注册</div>
|
|
<!-- 已登录 -->
|
|
<div class="rights" v-else>
|
|
<!-- <el-badge :value="cartnumber" :hidden="cartnumber == 0 ? true : false"> -->
|
|
<div class="card" @click="goShopping">
|
|
<img src="~assets/images/cards.png" alt />
|
|
<div class="text">购物车</div>
|
|
</div>
|
|
<!-- </el-badge> -->
|
|
<el-dropdown @command="handleCommand">
|
|
<span class="userInfo">
|
|
<div class="img">
|
|
<img :src="imgUrl + userInfo.headimg" alt v-if="userInfo.headimg" />
|
|
<img src="@/assets/images/default_headimg.png" alt v-else />
|
|
</div>
|
|
<span>{{ userInfo.nickname }}</span>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item command="/user">个人中心</el-dropdown-item>
|
|
<el-dropdown-item command="/login">退出登录</el-dropdown-item>
|
|
<el-dropdown-item command="isTheme">我的主题</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<!-- placement="right"
|
|
width="400"
|
|
trigger="click"-->
|
|
<!-- <el-popover placement="bottom" width="230" trigger="click">
|
|
<div class="zbcx" >
|
|
<div class="titleMgs">
|
|
<img src="~assets/images/msg.png" alt />
|
|
<span>消息</span>
|
|
</div>
|
|
<ul>
|
|
<li v-for="(item, index) in msglist" :key="index">{{ item }}</li>
|
|
<li class="more" v-if="typeI == 0" @click="clickMore">
|
|
查看更多
|
|
<i class="el-icon-arrow-right"></i>
|
|
</li>
|
|
</ul>
|
|
<div class="cjlq" v-if="typeI == 0">
|
|
<div @click="goLuckDraw">
|
|
<img src="~assets/images/cj.png" alt srcset />
|
|
<p>抽奖转盘</p>
|
|
</div>
|
|
<div @click="goCoupon">
|
|
<img src="~assets/images/lq.png" alt srcset />
|
|
<p>领券中心</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<i class="el-icon-bell" slot="reference"></i>
|
|
</el-popover>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="nav min_wrapper_1200"
|
|
v-if="$route.path !== '/goods_search' && $route.path !== '/goods_search/'"
|
|
>
|
|
<div class="navCon wrapper_1200 acea-row row-between-wrapper">
|
|
<div class="textPic acea-row row-middle">
|
|
<div class="icon" @click="goHome">
|
|
<img src="../assets/index/type.png" />
|
|
商品类型
|
|
</div>
|
|
|
|
<div class="list">
|
|
<div
|
|
@click="clickTab(item)"
|
|
class="item"
|
|
:class="{ 'url-color': item.url === $route.path }"
|
|
v-for="(item, index) in headerList"
|
|
:key="index"
|
|
>
|
|
<span>
|
|
<span>{{ item.name }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 企业资质 -->
|
|
<dialogSlot
|
|
width="40%"
|
|
:dialogSlotShow.sync="qualifications"
|
|
cancelText="返回"
|
|
tipsText="企业资质"
|
|
:confirmBtnShow="false"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<div v-for="(item, index) in qyzzimgUrlList" :key="index">
|
|
<img style="height: 400px; width: 100%" :src="imgUrl + item" alt />
|
|
</div>
|
|
</template>
|
|
</dialogSlot>
|
|
<!-- 切换主题 -->
|
|
|
|
<dialogSlot
|
|
width="25%"
|
|
:dialogSlotShow.sync="isTheme"
|
|
tipsText="页面主题设置"
|
|
@clickConfirm="clickConfirmIsTheme"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<div class="theme_Box">
|
|
<div class="selectTheme">
|
|
<el-radio-group v-model="radioTheme">
|
|
<el-radio label="#F33B50">
|
|
<div class="theme_danger theme_item"></div>
|
|
</el-radio>
|
|
<el-radio label="#00BEF9">
|
|
<div class="theme_primary theme_item"></div>
|
|
</el-radio>
|
|
<el-radio label="#F08433">
|
|
<div class="theme_warning theme_item"></div>
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</dialogSlot>
|
|
|
|
<!-- 找药服务 -->
|
|
<dialogSlot
|
|
width="310px"
|
|
:dialogSlotShow.sync="dialogSlotShow"
|
|
cancelText="返回"
|
|
tipsText="找药服务"
|
|
@clickConfirm="clickConfirm"
|
|
>
|
|
<template v-slot:contentSlot>
|
|
<div>
|
|
<el-input
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请输入您要反馈的内容"
|
|
v-model="pjForm.textarea"
|
|
></el-input>
|
|
<div class="tj">
|
|
<UploadImage1
|
|
@input="uploadSccess($event, '1')"
|
|
:value="pjForm.license"
|
|
:limit="6"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" />
|
|
|
|
<span>上传照片</span>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
<p>
|
|
<span>最多上传6张相关的这图片</span>
|
|
</p>
|
|
</div>
|
|
<el-input placeholder="请留下您的联系方式" v-model="pjForm.textarea"></el-input>
|
|
</div>
|
|
</template>
|
|
</dialogSlot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Utils from "../assets/js/util.js";
|
|
import Setting from "~/setting";
|
|
|
|
export default {
|
|
components: {},
|
|
name: "headers",
|
|
|
|
data() {
|
|
return {
|
|
showPopover: true,
|
|
imgUrl: Setting.uplodBaseURL,
|
|
cartnumber: 0,
|
|
// 是否登录
|
|
isSignin: localStorage.getItem("token") ? true : false,
|
|
userInfo: JSON.parse(localStorage.getItem("userInfo")),
|
|
dialogSlotShow: false,
|
|
pjForm: {},
|
|
typeI: 0,
|
|
msglist: [],
|
|
hotList: [],
|
|
headerList: [
|
|
{
|
|
name: "首页",
|
|
url: "/",
|
|
},
|
|
{
|
|
name: "商品",
|
|
url: "/goods_cate",
|
|
},
|
|
{
|
|
name: "秒杀",
|
|
url: "/goods_seckill",
|
|
},
|
|
{
|
|
name: "团购",
|
|
url: "/goods_presell",
|
|
},
|
|
{
|
|
name: "积分礼品",
|
|
url: "/integral",
|
|
},
|
|
{
|
|
name: "订单",
|
|
url: "/order",
|
|
},
|
|
{
|
|
name: "行业资讯",
|
|
url: "/information",
|
|
},
|
|
{
|
|
name: "质保查询",
|
|
url: "/inspect",
|
|
},
|
|
{
|
|
name: "企业资质",
|
|
url: 1,
|
|
},
|
|
],
|
|
keyword: "",
|
|
|
|
service_num: "",
|
|
qualifications: false,
|
|
isTheme: false,
|
|
radioTheme: "#00BEF9",
|
|
navName: "",
|
|
// 企业资质
|
|
qyzzimgUrlList: [],
|
|
|
|
siteName: "",
|
|
siteLogo: "",
|
|
};
|
|
},
|
|
computed: {},
|
|
//监听属性 类似于data概念
|
|
watch: {
|
|
"$store.state.typeI"(newVal, oldVal) {
|
|
this.typeI = newVal;
|
|
//对数据执行操作
|
|
// console.log(newVal, oldVal, "--");
|
|
},
|
|
},
|
|
created() {
|
|
// 根据登录状态显示企业资质
|
|
if (!this.isSignin) {
|
|
this.headerList = this.headerList.filter((item) => item.name !== "企业资质");
|
|
} else {
|
|
this.gainCount();
|
|
}
|
|
this.getHot(); //获取热词
|
|
this.getCopyright();
|
|
this.radioTheme = localStorage.getItem("--themeColor");
|
|
if (this.$auth.loggedIn) {
|
|
this.service_num = this.$auth.user.service_num;
|
|
this.$store.commit("serviceNum", this.$auth.user.service_num);
|
|
}
|
|
// console.log(this.userInfo);
|
|
this.init();
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
getCopyright() {
|
|
this.msglist = [];
|
|
this.$axios.post("/config/copyright").then((res) => {
|
|
console.log(res, "copyright");
|
|
});
|
|
},
|
|
//获取热词
|
|
getHot() {
|
|
this.$axios.post(`/goods/hotSearchWords`).then((res) => {
|
|
this.hotList = res.data.words.split(",");
|
|
// console.log(this.hotList);
|
|
});
|
|
},
|
|
// 点击热词在搜索框中显示并搜索
|
|
hotHTML(val) {
|
|
this.keyword = val;
|
|
},
|
|
// 顶部搜索栏
|
|
searchGoods() {
|
|
this.$router.push({ path: "goods_cate" });
|
|
Utils.$emit("demo", this.keyword);
|
|
},
|
|
|
|
// 主题切换
|
|
clickConfirmIsTheme() {
|
|
localStorage.setItem("--themeColor", this.radioTheme);
|
|
let root = document.documentElement;
|
|
root.style.setProperty(`--themeColor`, `${this.radioTheme}`);
|
|
this.isTheme = false;
|
|
},
|
|
// 确定找药服务
|
|
clickConfirm() {},
|
|
handleCommand(e) {
|
|
if (e == "isTheme") {
|
|
this.radioTheme = localStorage.getItem("--themeColor");
|
|
this.isTheme = true;
|
|
} else if (e == "/login") {
|
|
this.$confirm("确认退出登录, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.login();
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
} else {
|
|
this.$router.push({ path: e });
|
|
}
|
|
},
|
|
login() {
|
|
// localStorage.clear();
|
|
localStorage.removeItem("auth.strategy");
|
|
localStorage.removeItem("auth._token.local1");
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("userInfo");
|
|
this.$router.push({ path: "/login" });
|
|
},
|
|
clickMore() {
|
|
this.$router.push({ path: "/message" });
|
|
},
|
|
clickTab(item) {
|
|
this.navName = item.name;
|
|
|
|
if (item.name == "企业资质") {
|
|
this.$axios
|
|
.post(`/config/getLicenseInfo`)
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.qyzzimgUrlList = res.data.license;
|
|
this.qualifications = true;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
} else {
|
|
this.$router.push({ path: item.url });
|
|
}
|
|
},
|
|
goHome() {
|
|
// this.$router.push({
|
|
// path: "/",
|
|
// });
|
|
},
|
|
goLuckDraw() {
|
|
this.$router.push({
|
|
path: "/luck_draw",
|
|
});
|
|
},
|
|
goCoupon() {
|
|
this.$router.push({
|
|
path: "/coupon",
|
|
});
|
|
},
|
|
goShopping() {
|
|
this.$router.push({
|
|
path: "/shopping_cart",
|
|
});
|
|
},
|
|
|
|
gainCount() {
|
|
let that = this;
|
|
that.$axios
|
|
.post("/cart/count")
|
|
.then((res) => {
|
|
this.cartnumber = res.data;
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
submit() {
|
|
if (this.search.trim() !== "") {
|
|
this.$router.push({
|
|
path: "/goods_search",
|
|
query: {
|
|
title: this.keyword.trim(),
|
|
},
|
|
});
|
|
this.keyword = "";
|
|
} else {
|
|
this.$message.error("请输入要搜索的内容");
|
|
}
|
|
},
|
|
init() {
|
|
this.$axios.get(`/config/init`).then((res) => {
|
|
console.log(res, "res");
|
|
const { site_info } = res.data;
|
|
this.siteName = site_info.site_name;
|
|
this.siteLogo = site_info.logo_square;
|
|
// this.hotList = res.data.words.split(",");
|
|
console.log(site_info, "site_infosite_infosite_infosite_info");
|
|
localStorage.setItem("logo", this.siteLogo);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tj {
|
|
margin: 20px 0 10px;
|
|
display: flex;
|
|
|
|
p {
|
|
margin: 0 0 10px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.upload {
|
|
width: 74px;
|
|
height: 74px;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
border: 1px dashed #dcdcdc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
span {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.ipt {
|
|
.el-input__inner {
|
|
height: 35px;
|
|
border: 1px solid #d6d6d6;
|
|
padding: 0 10px;
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.zbcx {
|
|
.titleMgs {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
|
|
img {
|
|
width: 15px;
|
|
height: 18px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
li {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.more {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
margin: 20px 0 5px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
|
|
.el-icon-arrow-right {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cjlq {
|
|
border-top: 1px solid #efefef;
|
|
margin-top: 2px;
|
|
margin-bottom: 10px;
|
|
padding-top: 27px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
div {
|
|
cursor: pointer;
|
|
}
|
|
|
|
img {
|
|
width: 88px;
|
|
height: 88px;
|
|
}
|
|
|
|
p {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
background-color: #fff;
|
|
|
|
.top {
|
|
width: 1200px;
|
|
height: 165px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.left {
|
|
cursor: pointer;
|
|
width: 230px;
|
|
|
|
.logo {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: auto;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 24px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
width: 604px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 30px 0px 0 0;
|
|
|
|
.ipt {
|
|
width: 100%;
|
|
height: 35px;
|
|
border-radius: 0px 2px 2px 2px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
width: 60px;
|
|
height: 35px;
|
|
background: var(--themeColor);
|
|
border-radius: 0px 2px 2px 0px;
|
|
border: 1px solid var(--themeColor);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: -2px;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
|
|
p {
|
|
display: flex;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
li {
|
|
height: 17px;
|
|
font-size: 12px;
|
|
clicktabfont-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 17px;
|
|
margin-left: 28px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 98px;
|
|
height: 35px;
|
|
background: #eefbff;
|
|
border-radius: 0px 2px 2px 2px;
|
|
border: 1px solid var(--themeColor);
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: var(--themeColor);
|
|
line-height: 35px;
|
|
margin-left: 70px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rights {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 91px;
|
|
height: 35px;
|
|
background: #ffffff;
|
|
border-radius: 0px 2px 2px 2px;
|
|
border: 1px solid #d4d4d4;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.userInfo {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 30px;
|
|
cursor: pointer;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 22px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.img {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
width: 100%;
|
|
height: 45px;
|
|
background: #ffffff;
|
|
|
|
.navCon {
|
|
height: 100%;
|
|
|
|
.textPic {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.icon {
|
|
height: 100%;
|
|
width: 230px;
|
|
background: var(--themeColor);
|
|
border-radius: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 17px;
|
|
height: 17px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.list {
|
|
margin-left: 85px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item {
|
|
padding: 0px 10px;
|
|
margin-right: 30px;
|
|
color: #282828;
|
|
font-size: 16px;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
font-weight: 400;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: var(--themeColor);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.search {
|
|
width: 360px;
|
|
height: 40px;
|
|
border: 1px solid var(--themeColor);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
|
|
.text {
|
|
width: 290px;
|
|
padding-left: 14px;
|
|
color: #c1c1c1;
|
|
|
|
input {
|
|
width: 250px;
|
|
height: 36px;
|
|
border: none;
|
|
outline: none;
|
|
padding-left: 10px;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 15px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.bnt {
|
|
width: 64px;
|
|
height: 40px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-duoshanghupc-daohuotongzhi {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
padding: 0 5px 0 2px;
|
|
animation: shock 3s infinite ease;
|
|
}
|
|
|
|
@keyframes shock {
|
|
5%,
|
|
25%,
|
|
45% {
|
|
transform: rotate(8deg);
|
|
}
|
|
|
|
0%,
|
|
10%,
|
|
30%,
|
|
50% {
|
|
transform: rotate(-8deg);
|
|
}
|
|
|
|
15%,
|
|
35%,
|
|
55% {
|
|
transform: rotate(4deg);
|
|
}
|
|
|
|
20%,
|
|
40%,
|
|
60% {
|
|
transform: rotate(-4deg);
|
|
}
|
|
|
|
65%,
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.service_num {
|
|
position: absolute;
|
|
transform: scale(0.7);
|
|
top: -6px;
|
|
left: 14px;
|
|
font-size: 10px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 0 3px;
|
|
color: rgb(201, 18, 18);
|
|
}
|
|
|
|
.service_color:hover {
|
|
color: #000 !important;
|
|
}
|
|
|
|
.theme_Box {
|
|
// margin: 20px 0;
|
|
.selectTheme {
|
|
/deep/ .el-radio-group {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.el-radio {
|
|
position: relative;
|
|
|
|
.el-radio__input {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme_item {
|
|
width: 94px;
|
|
height: 94px;
|
|
border-radius: 8px;
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
.theme_danger {
|
|
background: #f33b50;
|
|
}
|
|
|
|
.theme_primary {
|
|
background: #00bef9;
|
|
}
|
|
|
|
.theme_warning {
|
|
background: #f08433;
|
|
}
|
|
}
|
|
|
|
.el-radio-group {
|
|
display: flex;
|
|
// justify-content: space-around;
|
|
width: 100%;
|
|
|
|
.el-radio {
|
|
width: 94px;
|
|
// text-align: center;
|
|
margin: 0;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-icon-bell {
|
|
margin-left: 20px;
|
|
}
|
|
</style>
|
|
|