修改轮播鼠标样式

This commit is contained in:
luJianJun 2023-07-20 14:02:29 +08:00
parent daf15376e9
commit 416b5232ae
3 changed files with 78 additions and 9 deletions

View File

@ -39,7 +39,7 @@
</el-carousel>
</div>
</div>
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="routePath !== '/seachPage'">
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="routePath !== '/seachPage'&&routePath !== '/detail'">
<div class="body-maxWidth dis-f" style="height:48px;">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }"
v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
@ -279,6 +279,7 @@ tabBtnType.value = route.path
width: 660px;
height: 280px;
border-radius: 15px;
cursor: pointer;
}
.user-box:hover .user-out-box {

View File

@ -21,7 +21,8 @@ import {
ElDatePicker,
ElMessage,
ElSkeleton,
ElSkeletonItem
ElSkeletonItem,
ElBreadcrumb
// 其他需要的组件
} from 'element-plus'
@ -71,6 +72,7 @@ app.use(ElDatePicker, {
app.use(ElSkeleton)
app.use(ElSkeletonItem)
app.use(ElMessage)
app.use(ElBreadcrumb)
app.use(store).use(router).use(Axios).mount('#app')

View File

@ -1,13 +1,79 @@
<template>
详情页
<div>
<pageTopBar></pageTopBar>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="title-top-box">
123
</div>
</div>
</div>
<footerTool></footerTool>
</div>
<!-- 右下角咨询 -->
<circle-btn></circle-btn>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
const uniqid = route.query.uniqid
import { reactive, onMounted, ref } from 'vue'
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import circleBtn from '@/components/public/circle-btn.vue'
import api from "../utils/api";
import footerTool from '@/components/footer/footer.vue'
</script>
<style scoped>
img {
object-fit: contain;
}
<style lang="less" scoped>
.dis-f {
display: flex;
}
</style>
.jus-x {
justify-content: center;
}
.al-item {
align-items: center;
}
.pos-r {
position: relative;
}
.body-maxWidth {
width: 1200px;
min-width: 1200px;
}
.s-w-100 {
width: 100%;
}
.jus-bet {
justify-content: space-between;
}
.title-top-box{
width: 1200px;
height: 186px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px;
transform: translateY(-38px);
}
</style>