应用资源详情样式修改

This commit is contained in:
851673013@qq.com 2022-06-15 18:11:20 +08:00
parent 7fc167b7df
commit fb6107d461
3 changed files with 274 additions and 194 deletions

View File

@ -11,12 +11,18 @@
<!--详情页头部--> <!--详情页头部-->
<div class="assign-case-detail-page-header"> <div class="assign-case-detail-page-header">
<div class="assign-case-detail-page-header-son"> <div class="assign-case-detail-page-header-son">
<div class="assign-case-detail-page-header-son-left" :style="`background:url(${pictureFormat(dataFrom.name)})`"></div> <div
class="assign-case-detail-page-header-son-left"
:style="`background:url(${pictureFormat(dataFrom.name)})`"
></div>
<div class="assign-case-detail-page-header-son-right"> <div class="assign-case-detail-page-header-son-right">
<div class="assign-case-detail-page-header-son-right-title"> <div class="assign-case-detail-page-header-son-right-title">
{{ dataFrom.name }} {{ dataFrom.name }}
</div> </div>
<div class="assign-case-detail-page-header-son-right-click"> <div
class="assign-case-detail-page-header-son-right-click"
@click="clickToView(dataFrom.name)"
>
<span>点击查看</span> <span>点击查看</span>
<span></span> <span></span>
</div> </div>
@ -78,10 +84,16 @@
<span>其他案例</span> <span>其他案例</span>
</div> </div>
<div class="assign-case-detail-page-content-right-card-content"> <div class="assign-case-detail-page-content-right-card-content">
<div
class="assign-case-detail-page-content-right-card-content-card"
@click="routerClick(dataFrom.else.name)"
>
<p>{{ dataFrom.else.name }}</p> <p>{{ dataFrom.else.name }}</p>
<p>{{ dataFrom.else.time }}</p> <p>{{ dataFrom.else.time }}</p>
</div> </div>
</div> </div>
<div class="no-data">暂无更多</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -90,35 +102,29 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, watch, onMounted } from 'vue'
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const val = router.currentRoute.value.query.val let val = router.currentRoute.value.query.val
console.log('val', val) console.log('val', val)
// const contenBox = ref([
// {
// photo: require('@/assets/assignCase/road.png'),
// name: '',
// time: '2022-01-01 12:00',
// },
// {
// photo: require('@/assets/assignCase/city.png'),
// name: '',
// time: '2022-01-01 12:00',
// },
// ])
// //
function pictureFormat(name){ function pictureFormat(name) {
if(name=='道路保洁监管场景'){ if (name == '道路保洁监管场景') {
return require('@/assets/assignCase/road.png') return require('@/assets/assignCase/road.png')
} } else {
else{
return require('@/assets/assignCase/city.png') return require('@/assets/assignCase/city.png')
} }
} }
//
const routerClick = (name) => {
val = name
router.push({ path: 'AssignCaseDetailPage', query: { val } })
}
let dataFrom = ref({}) let dataFrom = ref({})
const init = () => {
val = router.currentRoute.value.query.val
if (val == '道路保洁监管场景') { if (val == '道路保洁监管场景') {
dataFrom.value = { dataFrom.value = {
name: '道路保洁监管场景', name: '道路保洁监管场景',
@ -200,10 +206,21 @@
}, },
} }
} }
}
init()
//
watch(
() => router.currentRoute.value.query.val,
() => {
init()
},
{ immediate: true }
)
let tabName = ref('案例背景') let tabName = ref('案例背景')
//tab
const tabSwitch = (item, index) => { const tabSwitch = (item, index) => {
tabName.value = item.title tabName.value = item.title
if (index != 0) { if (index != 0 && index != 3) {
let top = let top =
document.querySelector( document.querySelector(
'#assign-case-detail-page-content-center-card' + index '#assign-case-detail-page-content-center-card' + index
@ -221,7 +238,7 @@
console.log('view.style.top', view.style.top) console.log('view.style.top', view.style.top)
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.scrollTop = top document.body.scrollTop = top
} else { } else if (index == 0) {
let top = 0 let top = 0
let view = document.getElementById( let view = document.getElementById(
'assign-case-detail-page-content-left-border-id' 'assign-case-detail-page-content-left-border-id'
@ -229,6 +246,56 @@
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.scrollTop = top document.body.scrollTop = top
view.style.top = '490px' view.style.top = '490px'
} else if (index == 3) {
let top = document.querySelector(
'#assign-case-detail-page-content-center-card' + index
).offsetTop
let view = document.getElementById(
'assign-case-detail-page-content-left-border-id'
)
document.documentElement.scrollTop = top
document.body.scrollTop = top
view.style.top = '220px'
}
}
const scrollTop = ref(0)
const domArr = ref([])
const selectNow = ref('')
onMounted(() => {
// console.clear()
window.addEventListener('scroll', () => {
debugger
domArr.value = document.querySelectorAll(
'.assign-case-detail-page-content-center-card'
)
scrollTop.value =
document.documentElement.scrollTop || document.body.scrollTop
for (let i = 0; i < domArr.value.length; i++) {
if (i === 0) {
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
selectNow.value = domArr.value[i].id
}
} else if (i == domArr.value.length - 1) {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
selectNow.value = domArr.value[i].id
}
} else {
if (
scrollTop.value > domArr.value[i].offsetTop - 50 &&
scrollTop.value < domArr.value[i + 1].offsetTop - 50
) {
selectNow.value = domArr.value[i].id
}
}
}
})
})
//
const clickToView = (name) => {
if (name == '道路保洁监管场景') {
window.open('http://15.72.183.90:7001/#/road')
} else {
window.open('http://15.72.183.90:7001/#/city')
} }
} }
</script> </script>
@ -236,42 +303,42 @@
<style lang="less" scoped> <style lang="less" scoped>
.assign-case-detail-page { .assign-case-detail-page {
position: relative; position: relative;
top: 64px; top: 0.64rem;
.assign-case-detail-page-header { .assign-case-detail-page-header {
height: 370px; height: 3.7rem;
background: url('~@/assets/assignCase/assignCase_bg2.png') no-repeat; background: url('~@/assets/assignCase/assignCase_bg2.png') no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
padding-top: 120px; padding-top: 1.2rem;
.assign-case-detail-page-header-son { .assign-case-detail-page-header-son {
width: 900px; width: 9rem;
height: 250px; height: 2.5rem;
border-radius: 10px; border-radius: 0.01rem;
background: #fff; background: #fff;
margin: auto; margin: auto;
box-shadow: 5px 5px 20px #f2f3fb; box-shadow: 5px 5px 20px #f2f3fb;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px; padding: 0.2rem;
.assign-case-detail-page-header-son-left { .assign-case-detail-page-header-son-left {
height: 200px; height: 2rem;
width: 290px; width: 2.9rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
margin-right: 30px; margin-right: 0.3rem;
} }
.assign-case-detail-page-header-son-right { .assign-case-detail-page-header-son-right {
.assign-case-detail-page-header-son-right-title { .assign-case-detail-page-header-son-right-title {
color: #000000; color: #000000;
font-size: 36px; font-size: 0.36rem;
line-height: 36px; line-height: 0.36rem;
margin-bottom: 40px; margin-bottom: 0.4rem;
} }
.assign-case-detail-page-header-son-right-click { .assign-case-detail-page-header-son-right-click {
color: #526aff; color: #526aff;
font-size: 20px; font-size: 0.2rem;
line-height: 20px; line-height: 0.2rem;
cursor: pointer; cursor: pointer;
span { span {
display: inline-block; display: inline-block;
@ -280,7 +347,7 @@
margin-right: 10px; margin-right: 10px;
} }
span:last-child { span:last-child {
width: 20px; width: 0.2rem;
height: 10px; height: 10px;
background: url('~@/assets/assignCase/assignCase_click.png') background: url('~@/assets/assignCase/assignCase_click.png')
no-repeat; no-repeat;
@ -292,67 +359,68 @@
} }
} }
.assign-case-detail-page-content { .assign-case-detail-page-content {
padding-top: 60px; padding-top: 0.6rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
.assign-case-detail-page-content-son { .assign-case-detail-page-content-son {
width: 1300px; width: 13rem;
display: flex; display: flex;
} }
.assign-case-detail-page-content-left { .assign-case-detail-page-content-left {
width: 167px; width: 1.67rem;
.assign-case-detail-page-content-left-border { .assign-case-detail-page-content-left-border {
border-right: 1px #e5e5e5 solid; border-right: 1px #e5e5e5 solid;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
position: fixed; position: fixed;
top: 490px; top: 4.9rem;
div { div {
height: 30px; height: 0.3rem;
padding-right: 70px; padding-right: 0.7rem;
margin-bottom: 30px; margin-bottom: 0.3rem;
font-size: 24px; font-size: 24px;
color: #666666; color: #666666;
line-height: 30px; line-height: 0.3rem;
cursor: pointer; cursor: pointer;
} }
div:last-child { div:last-child {
margin-bottom: 0px; margin-bottom: 0px;
} }
.assign-case-detail-page-content-left-border-click { .assign-case-detail-page-content-left-border-click {
padding-right: 66px; padding-right: 0.66rem;
border-right: 4px #526aff solid; border-right: 4px #526aff solid;
color: #526aff; color: #526aff;
} }
} }
} }
.assign-case-detail-page-content-center { .assign-case-detail-page-content-center {
width: 845px; width: 8.45rem;
padding: 0 40px 100px 35px; padding: 0 0.4rem 1rem 0.35rem;
.assign-case-detail-page-content-center-card { .assign-case-detail-page-content-center-card {
margin-bottom: 60px; margin-bottom: 0.6rem;
.assign-case-detail-page-content-center-card-title { .assign-case-detail-page-content-center-card-title {
font-size: 28px; font-size: 0.28rem;
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
line-height: 28px; line-height: 0.28rem;
margin-bottom: 35px; margin-bottom: 0.35rem;
} }
.assign-case-detail-page-content-center-card-description { .assign-case-detail-page-content-center-card-description {
color: #333333; color: #333333;
font-size: 20px; font-size: 0.2rem;
line-height: 34px; line-height: 0.34rem;
} }
} }
} }
.assign-case-detail-page-content-right { .assign-case-detail-page-content-right {
width: 270px; width: 2.7rem;
height: 260px; height: 2.6rem;
display: inline-block; display: inline-block;
.assign-case-detail-page-content-right-card { .assign-case-detail-page-content-right-card {
width: 270px; width: 2.7rem;
height: 260px; height: 2.6rem;
border: 1px #e5e5e5 solid; border: 1px #e5e5e5 solid;
position: relative;
.assign-case-detail-page-content-right-card-title { .assign-case-detail-page-content-right-card-title {
padding-left: 15px; padding-left: 15px;
background: linear-gradient( background: linear-gradient(
@ -360,10 +428,10 @@
rgba(113, 132, 252, 0.8), rgba(113, 132, 252, 0.8),
rgba(148, 163, 252, 0.8) rgba(148, 163, 252, 0.8)
); );
height: 64px; height: 0.64rem;
color: #fff; color: #fff;
font-size: 24px; font-size: 24px;
line-height: 64px; line-height: 0.64rem;
margin-bottom: 30px; margin-bottom: 30px;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
span:first-child { span:first-child {
@ -378,8 +446,11 @@
} }
} }
.assign-case-detail-page-content-right-card-content { .assign-case-detail-page-content-right-card-content {
padding-left: 20px; padding: 0 20px;
border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px;
.assign-case-detail-page-content-right-card-content-card {
cursor: pointer;
border-bottom: 1px solid #ebebeb;
p:first-child { p:first-child {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
@ -394,6 +465,15 @@
} }
} }
} }
.no-data {
position: absolute;
bottom: 0.2rem;
font-size: 0.18rem;
color: #cccccc;
width: 2.3rem;
text-align: center;
}
}
} }
} }
} }

View File

@ -49,7 +49,7 @@
}) })
const router = useRouter() const router = useRouter()
const applicationArea = ref('') const applicationArea = ref('')
// //
const addShoppingCart = () => { const addShoppingCart = () => {
console.log('加入申购车==================>', props.dataList) console.log('加入申购车==================>', props.dataList)
sgcInsert({ sgcInsert({
@ -62,7 +62,7 @@
mybus.emit('getSgcNum') mybus.emit('getSgcNum')
}) })
} }
// //
function toView() { function toView() {
// window.open(newpage.href, '_blank') // window.open(newpage.href, '_blank')
router.push({ router.push({
@ -115,10 +115,10 @@
font-size: 14px; font-size: 14px;
} }
.name { .name {
max-width: 330px; // max-width: 330px;
overflow: hidden; // overflow: hidden;
text-overflow: ellipsis; // text-overflow: ellipsis;
white-space: nowrap; // white-space: nowrap;
font-size: 40px; font-size: 40px;
margin-right: 20px; margin-right: 20px;
} }

View File

@ -22,14 +22,14 @@
</div> </div>
</div> </div>
<div class="bottom" v-if="props.dataList.id"> <div class="bottom" v-if="props.dataList.id">
<a-button type="primary" @click="toView()"> <!-- <a-button type="primary" @click="toView()">
<template #icon><form-outlined /></template> <template #icon><form-outlined /></template>
申请使用 申请使用
</a-button> </a-button>
<a-button type="primary" @click="addShoppingCart()"> <a-button type="primary" @click="addShoppingCart()">
<template #icon><shopping-cart-outlined /></template> <template #icon><shopping-cart-outlined /></template>
加入购物车 加入购物车
</a-button> </a-button> -->
<a-button type="primary" @click="goTOCollection()">收藏</a-button> <a-button type="primary" @click="goTOCollection()">收藏</a-button>
</div> </div>
</div> </div>
@ -37,42 +37,42 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue' // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, watch } from 'vue' import { defineProps, ref, watch } from 'vue'
import { scInsert } from '@/api/personalCenter' import { scInsert } from '@/api/personalCenter'
import { sgcInsert } from '@/api/home' // import { sgcInsert } from '@/api/home'
import { useRouter } from 'vue-router' // import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' // import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const router = useRouter() // const router = useRouter()
const applicationArea = ref('') const applicationArea = ref('')
// // //
const addShoppingCart = () => { // const addShoppingCart = () => {
console.log('加入申购车==================>', props.dataList) // console.log('==================>', props.dataList)
sgcInsert({ // sgcInsert({
delFlag: '0', // delFlag: '0',
resourceId: props.dataList.id, // resourceId: props.dataList.id,
// userId: userId.value, // // userId: userId.value,
}).then((res) => { // }).then((res) => {
console.log(res) // console.log(res)
message.success('添加申购车成功!') // message.success('')
mybus.emit('getSgcNum') // mybus.emit('getSgcNum')
}) // })
} // }
// // //
function toView() { // function toView() {
// window.open(newpage.href, '_blank') // // window.open(newpage.href, '_blank')
router.push({ // router.push({
path: '/apply', // path: '/apply',
query: { // query: {
name: props.dataList.name, // name: props.dataList.name,
resourceId: [props.dataList.id], // resourceId: [props.dataList.id],
}, // },
}) // })
} // }
// //
const goTOCollection = () => { const goTOCollection = () => {
console.log('收藏===================》', props.dataList) console.log('收藏===================》', props.dataList)
@ -115,10 +115,10 @@
font-size: 0.14rem; font-size: 0.14rem;
} }
.name { .name {
max-width: 3.3rem; // max-width: 3.3rem;
overflow: hidden; // overflow: hidden;
text-overflow: ellipsis; // text-overflow: ellipsis;
white-space: nowrap; // white-space: nowrap;
font-size: 0.4rem; font-size: 0.4rem;
margin-right: 0.2rem; margin-right: 0.2rem;
} }