zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

需改pc样式上的bug

master
lemon橪 2022-02-15 16:54:36 +08:00
parent db13814156
commit 45a6e76d4a
1 changed files with 86 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
buyer/src/components/header/hoverSearch.vue
View File

@ -2,92 +2,108 @@
<div class="scroll-show"> <div class="scroll-show">
<div class="content clearfix"> <div class="content clearfix">
<cateNav class="cate" :hover="true" :showNavBar="false"></cateNav> <cateNav class="cate" :hover="true" :showNavBar="false"></cateNav>
<Search class="search-con" :hover="true" :showLogo="false" :showTag="false"></Search> <Search
<Icon type="ios-cart-outline" @click="goCartList" class="cart-icon" @mouseenter.native="getCartList" /> class="search-con"
<i class="cart-badge">{{cartNum < 100 ? cartNum : '99'}}</i> :hover="true"
:showLogo="false"
:showTag="false"
></Search>
<Icon
type="ios-cart-outline"
@click="goCartList"
class="cart-icon"
@mouseenter.native="getCartList"
/>
<i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {cartCount} from '@/api/cart.js' import { cartCount } from "@/api/cart.js";
import storage from '@/plugins/storage.js'; import storage from "@/plugins/storage.js";
export default { export default {
data () { data() {
return { return {
userInfo: {} // 用户信息 userInfo: {}, // 用户信息
} };
}, },
computed: { computed: {
cartNum () { // 购物车商品数量 cartNum() {
return this.$store.state.cartNum // 购物车商品数量
} return this.$store.state.cartNum;
},
}, },
methods: { methods: {
goCartList () { // 跳转购物车页面 goCartList() {
// 跳转购物车页面
let routerUrl = this.$router.resolve({ let routerUrl = this.$router.resolve({
path: '/cart' path: "/cart",
}) });
window.open(routerUrl.href, '_blank') window.open(routerUrl.href, "_blank");
}, },
getCartList () { // 获取购物车列表 getCartList() {
if (storage.getItem('userInfo')) { // 获取购物车列表
cartCount().then(res => { if (storage.getItem("userInfo")) {
this.$store.commit('SET_CARTNUM', res.result) cartCount().then((res) => {
this.Cookies.setItem('cartNum', res.result) this.$store.commit("SET_CARTNUM", res.result);
}) this.Cookies.setItem("cartNum", res.result);
});
} }
},
},
mounted() {
if (storage.getItem("userInfo")) {
this.userInfo = JSON.parse(storage.getItem("userInfo"));
} }
}, },
mounted () { };
if (storage.getItem('userInfo')) {
this.userInfo = JSON.parse(storage.getItem('userInfo'));
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{ .content {
width: 1200px; width: 1200px;
height: 40px; height: 100%;
margin: 10px auto; margin: auto;
position: relative; position: fixed;
} top: 0;
.cate { left: 50%;
float: left; margin-left: -600px;
width: 200px!important; }
} .cate {
.search-con{ float: left;
float: left; width: 200px !important;
width: 800px; }
overflow: hidden; .search-con {
margin-top: -27px; float: left;
} width: 800px;
.cart-icon { overflow: hidden;
width: 30px; margin-top: -27px;
float: left; }
font-size: 25px; .cart-icon {
margin-top: 8px; width: 30px;
color: $theme_color; float: left;
z-index: 1; font-size: 25px;
position: relative; margin-top: 8px;
&:hover{ color: $theme_color;
cursor: pointer; z-index: 1;
} position: relative;
} &:hover {
.cart-badge { cursor: pointer;
position: absolute;
font-style: normal;
right: 165px;
display: block;
background-color: $theme_color;
color: #fff;
font-size: 12px;
width: 17px;
height: 17px;
border-radius: 10px;
line-height: 17px;
text-align: center;
z-index: 5;
top: 3px;
} }
}
.cart-badge {
position: absolute;
font-style: normal;
right: 165px;
display: block;
background-color: $theme_color;
color: #fff;
font-size: 12px;
width: 17px;
height: 17px;
border-radius: 10px;
line-height: 17px;
text-align: center;
z-index: 5;
top: 3px;
}
</style> </style>