bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式等问题优化

This commit is contained in:
BianLzhaoMin 2024-12-23 13:52:38 +08:00
parent 031102bec8
commit 433c04463b
22 changed files with 775 additions and 655 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.d.ts vendored
View File

@ -13,6 +13,7 @@ declare module 'vue' {
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel'] ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem'] ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader'] ElCascader: typeof import('element-plus/es')['ElCascader']
@ -27,7 +28,6 @@ declare module 'vue' {
ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
@ -35,7 +35,6 @@ declare module 'vue' {
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElProgress: typeof import('element-plus/es')['ElProgress'] ElProgress: typeof import('element-plus/es')['ElProgress']

12
package-lock.json generated
View File

@ -42,6 +42,7 @@
"@vitejs/plugin-vue-jsx": "^3.0.2", "@vitejs/plugin-vue-jsx": "^3.0.2",
"@vue/tsconfig": "^0.4.0", "@vue/tsconfig": "^0.4.0",
"npm-run-all2": "^6.1.1", "npm-run-all2": "^6.1.1",
"postcss-px-to-viewport": "^1.1.1",
"sass": "^1.32.13", "sass": "^1.32.13",
"typescript": "~5.2.0", "typescript": "~5.2.0",
"unplugin-auto-import": "^0.17.1", "unplugin-auto-import": "^0.17.1",
@ -3917,6 +3918,17 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/postcss-px-to-viewport": {
"version": "1.1.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
"integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"object-assign": ">=4.0.1",
"postcss": ">=5.0.2"
}
},
"node_modules/process-nextick-args": { "node_modules/process-nextick-args": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/process-nextick-args/-/process-nextick-args-2.0.1.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/process-nextick-args/-/process-nextick-args-2.0.1.tgz",

1
package.json
View File

@ -48,6 +48,7 @@
"@vitejs/plugin-vue-jsx": "^3.0.2", "@vitejs/plugin-vue-jsx": "^3.0.2",
"@vue/tsconfig": "^0.4.0", "@vue/tsconfig": "^0.4.0",
"npm-run-all2": "^6.1.1", "npm-run-all2": "^6.1.1",
"postcss-px-to-viewport": "^1.1.1",
"sass": "^1.32.13", "sass": "^1.32.13",
"typescript": "~5.2.0", "typescript": "~5.2.0",
"unplugin-auto-import": "^0.17.1", "unplugin-auto-import": "^0.17.1",

18
postcss.config.js Normal file
View File

@ -0,0 +1,18 @@
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 1920, // 设计稿的视口宽度
viewportHeight: 1080, // 设计稿的视口宽度
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
unitPrecision: 5,
propList: ['*'],
selectorBlackList: ['.ignore'], // 需要忽略的CSS选择器
minPixelValue: 1, // 小于或等于`1px`不转换为视口单位
mediaQuery: false, // 允许在媒体查询中转换`px`
selectorBlackList: [':root', 'el-'], // 排除 Element Plus 的类名
// replace: true,
exclude: [/node_modules\/element-plus/], // 排除 Element Plus 的样式文件
},
},
}

5
src/App.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template> <template>
<RouterView /> <RouterView />
</template> </template>
@ -29,4 +28,8 @@
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: transparent; /* 滚动条和内容区的角落部分，通常用于表格等 */ background-color: transparent; /* 滚动条和内容区的角落部分，通常用于表格等 */
} }
body {
font-size: 16px;
}
</style> </style>

6
src/components/Breadcrumb/index.vue
View File

@ -21,3 +21,9 @@ defineProps({
}, },
}) })
</script> </script>
<style scoped>
.el-breadcrumb {
font-size: 16px;
}
</style>

76
src/components/FooterInfo/index.vue
View File

@ -3,56 +3,42 @@
<template> <template>
<!-- 公共页脚 --> <!-- 公共页脚 -->
<div class="footer-container"> <div class="footer-container">
<div class="wapper"> <ul class="icon-info">
<ul class="icon-info"> <li>
<li> <span>正</span>
<span>正</span> <span>
<span> <i>正品行货</i>
<i>正品行货</i> <i>品类齐全</i>
<i>品类齐全</i> </span>
</span> </li>
</li> <li>
<li> <span>透</span>
<span>透</span> <span>
<span> <i>阳光采购</i>
<i>阳光采购</i> <i>一站服务</i>
<i>一站服务</i> </span>
</span> </li>
</li> <li>
<li> <span>快</span>
<span>快</span> <span>
<span> <i>轻松畅选</i>
<i>轻松畅选</i> <i>租赁快捷</i>
<i>租赁快捷</i> </span>
</span> </li>
</li> <li>
<li> <span>好</span>
<span>好</span> <span>
<span> <i>售后无忧</i>
<i>售后无忧</i> <i>精致服务</i>
<i>精致服务</i> </span>
</span> </li>
</li> </ul>
</ul>
<!-- <ul class="mobile-info">
<li>商城热线</li>
<li>供应商入驻、开店、续费资讯：010-2345-1234</li>
<li>供应商咨询：010-2345-1234</li>
<li>采购商咨询：010-2345-1234</li>
<li>互联网公司投诉意见：010-2345-1234</li>
<li>
工作时间：周一至周五 8:30-12：00 &nbsp;&nbsp;&nbsp;&nbsp;
14：00-17：30
</li>
</ul> -->
</div>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.footer-container { .footer-container {
margin-top: 40px; // margin-top: 40px;
// height: 650px; // height: 650px;
border-top: 1px solid #979797; border-top: 1px solid #979797;
background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat; background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat;

19
src/components/Navmenu/index.vue
View File

@ -65,7 +65,7 @@ const navMenuClick = (name: any) => {
v-for="item in navMenuList" v-for="item in navMenuList"
:key="item.name" :key="item.name"
@click="navMenuClick(item.routerName)" @click="navMenuClick(item.routerName)"
:class="{ active: route.meta.activeName === item.routerName }" :class="{ 'active-li': route.meta.activeName === item.routerName }"
> >
{{ item.name }} {{ item.name }}
</li> </li>
@ -74,20 +74,23 @@ const navMenuClick = (name: any) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.nav-menu { .nav-menu {
height: 43px; // height: 48px;
padding: 6px 0;
background-color: #f7f9fa; background-color: #f7f9fa;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around;
li { li {
color: #7d7d7d; color: #7d7d7d;
padding: 0 20px; padding: 10px 20px;
border-right: 1px solid #7d7d7d;
// border-right: 1px solid #7d7d7d;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: #333333; color: #00a288;
font-weight: bold; font-weight: bold;
} }
@ -96,9 +99,11 @@ const navMenuClick = (name: any) => {
} }
} }
.active { .active-li {
color: #333333; color: #00a288;
font-weight: bold; font-weight: bold;
background-color: #c9e7e5;
border-radius: 6px;
} }
} }
</style> </style>

2
src/components/TitleTip/index.vue
View File

@ -21,7 +21,7 @@ defineProps({
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; // font-size: 14px;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
} }

17
src/components/equipCardHall/index.vue
View File

@ -6,8 +6,8 @@
<span class="item_1_span"> {{ name }} </span> <span class="item_1_span"> {{ name }} </span>
<!-- <span class="item_2_span"> 待租 </span> --> <!-- <span class="item_2_span"> 待租 </span> -->
</li> </li>
<li style="color: #b6b6b6">{{ company }}</li> <li style="color: #b6b6b6; font-size: 14px">{{ company }}</li>
<li style="color: #b6b6b6"> <li style="color: #b6b6b6; font-size: 14px">
<el-icon style="margin-right: 3px; color: #25ac9c"><PhoneFilled /></el-icon> <el-icon style="margin-right: 3px; color: #25ac9c"><PhoneFilled /></el-icon>
{{ personPhone }} {{ personPhone }}
</li> </li>
@ -15,9 +15,9 @@
<div style="margin: 10px 0; padding-right: 15px; text-align: right"> <div style="margin: 10px 0; padding-right: 15px; text-align: right">
<span style="text-align: right; color: #ff4800"> <span style="text-align: right; color: #ff4800">
<i style="font-size: 10px">￥</i> <i style="font-size: 14px">￥</i>
<i style="margin: 0 6px; font-size: 17px; font-weight: bold">{{ price }}</i> <i style="margin: 0 6px; font-size: 18px; font-weight: bold">{{ price }}</i>
<i style="font-size: 10px">/ 天</i> <i style="font-size: 14px">/ 天</i>
</span> </span>
</div> </div>
</div> </div>
@ -103,7 +103,7 @@ const onHandelLessee = () => {
} }
.item_1_span { .item_1_span {
font-size: 16px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.item_2_span { .item_2_span {
@ -157,7 +157,7 @@ const onHandelLessee = () => {
margin-top: 8px; margin-top: 8px;
.item { .item {
background: white; background: white;
font-size: 14px;
font-weight: 400; font-weight: 400;
color: #005af2; color: #005af2;
padding: 2px 3px; padding: 2px 3px;
@ -168,7 +168,7 @@ const onHandelLessee = () => {
} }
.company { .company {
margin-top: 10px; margin-top: 10px;
font-size: 14px;
font-weight: 400; font-weight: 400;
color: #a5a4a4; color: #a5a4a4;
line-height: 20px; line-height: 20px;
@ -177,7 +177,6 @@ const onHandelLessee = () => {
white-space: nowrap; white-space: nowrap;
} }
.price { .price {
font-size: 14px;
font-weight: 400; font-weight: 400;
color: #ff4800; color: #ff4800;
margin-top: 20px; margin-top: 20px;

2
src/components/header/index.vue
View File

@ -284,7 +284,7 @@ const isMyInfoPage = () => {
display: flex; display: flex;
align-items: center; align-items: center;
color: #6d6d6d; color: #6d6d6d;
font-size: 14px; // font-size: 14px;
cursor: pointer; cursor: pointer;
.line { .line {

90
src/layout/header.vue
View File

@ -281,16 +281,7 @@ const onJumpUser = () => {
<div class="header-item roles-check" @click="onRolesCheck" v-if="isShowLogout"> <div class="header-item roles-check" @click="onRolesCheck" v-if="isShowLogout">
<!-- <img src="../assets/img/home/star.png" alt="" /> --> <!-- <img src="../assets/img/home/star.png" alt="" /> -->
<a style="display: flex; justify-content: center"> <a style="display: flex; justify-content: center">
<i <i class="lease-name">
style="
background-color: #c9e7e5;
color: #47c4ad;
padding: 4px 6px;
font-weight: bold;
font-size: 13px;
border-radius: 4px;
"
>
{{ isAdmin ? '管理方' : rolesName == 1 ? '出租方' : '承租方' }} {{ isAdmin ? '管理方' : rolesName == 1 ? '出租方' : '承租方' }}
</i> </i>
<!-- <el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon> --> <!-- <el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon> -->
@ -298,7 +289,7 @@ const onJumpUser = () => {
<div class="line"></div> <div class="line"></div>
<div class="select-list" v-if="isRolesSelect"> <div class="select-list" v-show="isRolesSelect">
<div <div
style="border-top-left-radius: 6px; border-top-right-radius: 6px" style="border-top-left-radius: 6px; border-top-right-radius: 6px"
@click.stop="onSelectRoles(1)" @click.stop="onSelectRoles(1)"
@ -336,13 +327,13 @@ const onJumpUser = () => {
<!-- 中间logo 部分 --> <!-- 中间logo 部分 -->
<div class="logo-ipt-container"> <div class="logo-ipt-container">
<div class="home-logo"> <div class="home-logo" @click="$router.push('/mall-view')">
<el-image <!-- <el-image
style="width: 70%; margin-left: 100px; cursor: pointer" style="width: 70%; cursor: pointer"
:src="imgSrc" :src="imgSrc"
fit="cover" fit="cover"
@click="$router.push('/mall-view')" @click="$router.push('/mall-view')"
/> /> -->
</div> </div>
<div class="home-search"> <div class="home-search">
<input <input
@ -464,6 +455,8 @@ const onJumpUser = () => {
/* 头部个人信息部分 */ /* 头部个人信息部分 */
.header-box { .header-box {
width: 1552px;
margin: 0 auto;
height: 37px; height: 37px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -475,8 +468,16 @@ const onJumpUser = () => {
display: flex; display: flex;
align-items: center; align-items: center;
color: #6d6d6d; color: #6d6d6d;
font-size: 14px;
cursor: pointer; cursor: pointer;
.lease-name {
background-color: #c9e7e5;
color: #47c4ad;
padding: 4px 6px;
font-weight: bold;
font-size: 16px;
border-radius: 4px;
}
.line { .line {
width: 1px; width: 1px;
height: 15px; height: 15px;
@ -510,11 +511,12 @@ const onJumpUser = () => {
position: relative; position: relative;
} }
.roles-check .select-list { .roles-check .select-list {
height: 50px; // height: 50px;
// display: none; // display: none;
position: absolute; position: absolute;
left: 1%; left: 1%;
bottom: -46px; bottom: 0;
transform: translateY(100%);
width: 98%; width: 98%;
background-color: #fff; background-color: #fff;
border-radius: 6px; border-radius: 6px;
@ -523,9 +525,9 @@ const onJumpUser = () => {
transition: all 1s linear; transition: all 1s linear;
div { div {
height: 25px; height: 30px;
font-size: 14px; font-size: 16px;
line-height: 25px; line-height: 30px;
text-align: center; text-align: center;
letter-spacing: 1px; letter-spacing: 1px;
} }
@ -575,36 +577,48 @@ const onJumpUser = () => {
/* 中间logo 搜索框部分 */ /* 中间logo 搜索框部分 */
.logo-ipt-container { .logo-ipt-container {
width: 1552px;
margin: 0 auto;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #eeeff6; background-color: #eeeff6;
padding: 30px 0; padding: 30px;
box-sizing: content-box; box-sizing: border-box;
// box-sizing: content-box;
// padding: 30px 0 60px 0; // padding: 30px 0 60px 0;
.home-logo { .home-logo {
width: 286px; // width: 286px;
height: 100%; // height: 100%;
width: 240px;
height: 80px;
background-color: orange;
background: url('@/assets/img/logo.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
} }
.home-search { .home-search {
position: relative; position: relative;
width: 1000px; flex: 1;
margin-left: 40px; width: 100%;
margin: 0 20px;
// width: 1000px;
// margin-left: 40px;
.left-check-box { .left-check-box {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 53px; height: 53px;
width: 70px; width: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-right: 1px solid #3cb4a6; border-right: 1px solid #3cb4a6;
font-size: 14px; // font-size: 14px;
color: #11806f; color: #11806f;
cursor: pointer; cursor: pointer;
} }
@ -612,8 +626,9 @@ const onJumpUser = () => {
.check-container { .check-container {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -100%; bottom: 0;
width: 70px; transform: translateY(100%);
width: 100px;
background-color: #fff; background-color: #fff;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@ -622,9 +637,9 @@ const onJumpUser = () => {
cursor: pointer; cursor: pointer;
div { div {
height: 25px; height: 35px;
font-size: 14px; // font-size: 14px;
line-height: 25px; line-height: 35px;
text-align: center; text-align: center;
letter-spacing: 1px; letter-spacing: 1px;
} }
@ -637,7 +652,10 @@ const onJumpUser = () => {
} }
.cart-container { .cart-container {
flex: 1; width: 130px;
// background-color: orange;
// height: 60px;
// flex: 1;
} }
// img { // img {
@ -656,7 +674,7 @@ const onJumpUser = () => {
line-height: 53px; line-height: 53px;
color: #333; color: #333;
text-shadow: 0 0 0 #333; text-shadow: 0 0 0 #333;
padding-left: 75px; padding-left: 110px;
box-sizing: border-box; box-sizing: border-box;
} }

4
src/style/css/reset.css
View File

@ -137,13 +137,13 @@ table {
} }
#app { #app {
width: 100vw; /* width: 100vw; */
/* height: 100vh; */ /* height: 100vh; */
background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%); background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
} }
.wapper { .wapper {
width: 1200px; width: 1552px;
margin: 0 auto; margin: 0 auto;
} }

47
src/views/AppMain-old.vue Normal file
View File

@ -0,0 +1,47 @@
<script setup lang="ts">
import FooterInfo from '../components/FooterInfo/index.vue'
import HeaderCom from '../layout/header.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
const route = useRoute()
// 判断是否是个人中心页面 如果是则隐藏页脚
const isMyInfoPage = () => {
if (route.path.indexOf('myuser') === -1) {
return true
} else {
return false
}
}
onMounted(() => {})
</script>
<template>
<div class="app-container">
<HeaderCom />
<div class="container">
<el-config-provider :locale="locale">
<RouterView />
</el-config-provider>
</div>
<FooterInfo v-if="isMyInfoPage()" />
</div>
<!-- <FooterInfo /> -->
</template>
<style scoped lang="scss">
.app-container {
display: flex;
flex-direction: column;
}
.container {
width: 100%;
margin: 0 auto;
background: #ffffff;
border-radius: 30px;
padding: 20px 30px;
box-sizing: border-box;
}
</style>

27
src/views/AppMain.vue
View File

@ -1,18 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import FooterInfo from '../components/FooterInfo/index.vue' import FooterInfo from '../components/FooterInfo/index.vue'
import HeaderCom from '../layout/header.vue' import HeaderCom from '../layout/header.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
const route = useRoute() const route = useRoute()
// 判断是否是个人中心页面 如果是则隐藏页脚
const isMyInfoPage = () => {
if (route.path.indexOf('myuser') === -1) {
return true
} else {
return false
}
}
onMounted(() => {}) onMounted(() => {})
</script> </script>
@ -21,27 +10,31 @@ onMounted(() => {})
<div class="app-container"> <div class="app-container">
<HeaderCom /> <HeaderCom />
<div class="container"> <div class="container">
<el-config-provider :locale="locale"> <el-config-provider>
<RouterView /> <RouterView />
</el-config-provider> </el-config-provider>
</div> </div>
<FooterInfo v-if="isMyInfoPage()" />
</div> </div>
<FooterInfo />
<!-- <FooterInfo /> -->
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.app-container { .app-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 1920px;
height: auto;
// height: 1080px;
} }
.container { .container {
width: 100%; width: 1552px;
background-color: pink;
margin: 0 auto; margin: 0 auto;
background: #ffffff; background: #ffffff;
border-radius: 30px; border-radius: 30px;
padding: 20px 30px; // padding: 20px 30px;
padding: 20px;
box-sizing: border-box; box-sizing: border-box;
// overflow-y: auto;
} }
</style> </style>

561
src/views/cart/index.vue
View File

@ -1,97 +1,100 @@
<template> <template>
<div style="width: 100%; background-color: #f5f5f5"> <div style="display: flex; flex-direction: column; height: 100vh">
<Header class="wapper" /> <div style="width: 100%; background-color: #f5f5f5">
</div> <Header class="wapper" />
<div class="container">
<el-breadcrumb separator="/" class="primary-lease">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>预约车</el-breadcrumb-item>
</el-breadcrumb>
<div class="cart-title">
<div></div>
<div style="margin: 0 8px">预约车</div>
<div>({{ amountNum }})</div>
</div> </div>
<div class="container">
<el-breadcrumb separator="/" class="primary-lease">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>预约车</el-breadcrumb-item>
</el-breadcrumb>
<el-row class="cart-th"> <div class="cart-title">
<el-col :span="2"> <div></div>
<div> <div style="margin: 0 8px">预约车</div>
<el-checkbox v-model="allChecked" @change="onChangeAll" :key="allKey"> <div>({{ amountNum }})</div>
全选 </div>
</el-checkbox>
</div>
</el-col>
<el-col :span="9">
<div>装备信息</div>
</el-col>
<el-col :span="3">
<div>租期</div>
</el-col>
<el-col :span="2">
<div>日租金/元</div>
</el-col>
<el-col :span="2">
<div>天数</div>
</el-col>
<el-col :span="2">
<div>数量</div>
</el-col>
<el-col :span="2">
<div>总金额/元</div>
</el-col>
<el-col :span="2">
<div>操作</div>
</el-col>
</el-row>
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index"> <el-row class="cart-th">
<el-row style="border-bottom: 1px solid #ccc"> <el-col :span="2">
<el-col :span="1"> <div>
<div style="text-align: center"> <el-checkbox v-model="allChecked" @change="onChangeAll" :key="allKey">
<el-checkbox 全选
v-model="item.isChecked"
:key="index"
@change="onChangeCompany($event, index, item)"
>
</el-checkbox> </el-checkbox>
</div> </div>
</el-col> </el-col>
<el-col :span="22" class="cart-user-info"> <el-col :span="9">
<div>{{ item.companyPersonPhoneKey.companyName }}</div> <div>装备信息</div>
<div class="user-name">{{ item.companyPersonPhoneKey.person }}</div> </el-col>
<div class="user-phone">{{ item.companyPersonPhoneKey.personPhone }}</div> <el-col :span="3">
<div>租期</div>
</el-col>
<el-col :span="2">
<div>日租金/元</div>
</el-col>
<el-col :span="2">
<div>天数</div>
</el-col>
<el-col :span="2">
<div>数量</div>
</el-col>
<el-col :span="2">
<div>总金额/元</div>
</el-col>
<el-col :span="2">
<div>操作</div>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="cart-list" v-for="(goods, j) in item.devInfoVoList" :key="goods.id"> <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
<el-col :span="1"> <el-row style="border-bottom: 1px solid #ccc">
<div style="text-align: center"> <el-col :span="1">
<el-checkbox <div style="text-align: center">
v-model="goods.isChecked" <el-checkbox
@change="onChangeGoods(index)" v-model="item.isChecked"
:key="goods.id" :key="index"
> @change="onChangeCompany($event, index, item)"
</el-checkbox> >
</div> </el-checkbox>
</el-col>
<el-col :span="9" class="goods-info">
<img :src="goods.picUrl" alt="" />
<div class="goods-code">
<div style="font-size: 14px; font-weight: bold">{{ goods.deviceName }}</div>
<div>装备编号： {{ goods.code }}</div>
<div>装备型号： {{ goods.typeName }}</div>
</div>
</el-col>
<el-col :span="4">
<div class="lease-date">
<div style="margin-bottom: 8px">
{{ goods.rentBeginTime }}
<span v-if="goods.rentBeginTime && goods.rentEndTime">-</span>
{{ goods.rentEndTime }}
</div> </div>
</el-col>
<el-col :span="22" class="cart-user-info">
<div>{{ item.companyPersonPhoneKey.companyName }}</div>
<div class="user-name">{{ item.companyPersonPhoneKey.person }}</div>
<div class="user-phone">{{ item.companyPersonPhoneKey.personPhone }}</div>
</el-col>
</el-row>
<!-- <el-date-picker <el-row class="cart-list" v-for="(goods, j) in item.devInfoVoList" :key="goods.id">
<el-col :span="1">
<div style="text-align: center">
<el-checkbox
v-model="goods.isChecked"
@change="onChangeGoods(index)"
:key="goods.id"
>
</el-checkbox>
</div>
</el-col>
<el-col :span="9" class="goods-info">
<img :src="goods.picUrl" alt="" />
<div class="goods-code">
<div style="font-size: 14px; font-weight: bold">
{{ goods.deviceName }}
</div>
<div>装备编号： {{ goods.code }}</div>
<div>装备型号： {{ goods.typeName }}</div>
</div>
</el-col>
<el-col :span="4">
<div class="lease-date">
<div style="margin-bottom: 8px">
{{ goods.rentBeginTime }}
<span v-if="goods.rentBeginTime && goods.rentEndTime">-</span>
{{ goods.rentEndTime }}
</div>
<!-- <el-date-picker
style="width: 100px; margin-top: 10px" style="width: 100px; margin-top: 10px"
v-model="goods.lease_date" v-model="goods.lease_date"
type="daterange" type="daterange"
@ -101,46 +104,46 @@
> >
</el-date-picker> --> </el-date-picker> -->
<CustomDatePickerButton <CustomDatePickerButton
:modelValue="goods.lease_date" :modelValue="goods.lease_date"
:companyIndex="index" :companyIndex="index"
:goodsIndex="j" :goodsIndex="j"
type="primary" type="primary"
size="large" size="large"
placeholder="选择日期" placeholder="选择日期"
@onLeaseDateChange="onLeaseDateChange" @onLeaseDateChange="onLeaseDateChange"
/> />
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div class="red-font"> <div class="red-font">
{{ goods.dayLeasePrice }} {{ goods.dayLeasePrice }}
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div class="red-font" style="color: #0062ff"> <div class="red-font" style="color: #0062ff">
{{ goods.days }} {{ goods.days }}
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div> <div>
<el-input-number <el-input-number
v-model="goods.num" v-model="goods.num"
style="width: 100px" style="width: 100px"
:min="1" :min="1"
:max="goods.deviceCount || 1" :max="goods.deviceCount || 1"
size="small" size="small"
/> />
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div class="red-font"> <div class="red-font">
{{ goods.num * goods.days * goods.dayLeasePrice }} {{ goods.num * goods.days * goods.dayLeasePrice }}
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div> <div>
<!-- <el-button <!-- <el-button
link link
@click="onDeleteGoods(goods.id)" @click="onDeleteGoods(goods.id)"
style="color: #ff4800; font-weight: bold" style="color: #ff4800; font-weight: bold"
@ -148,146 +151,147 @@
删除 删除
</el-button> --> </el-button> -->
<el-popconfirm <el-popconfirm
width="220" width="220"
:icon="InfoFilled" :icon="InfoFilled"
icon-color="#626AEF" icon-color="#626AEF"
title="确定删除该条预约车记录吗？" title="确定删除该条预约车记录吗？"
@confirm="onDeleteGoods(goods.id)" @confirm="onDeleteGoods(goods.id)"
> >
<template #reference> <template #reference>
<el-button link style="color: #ff4800; font-weight: bold"> <el-button link style="color: #ff4800; font-weight: bold">
删除</el-button 删除</el-button
>
</template>
<template #actions="{ confirm }">
<el-button size="small">取消</el-button>
<el-button type="danger" size="small" @click="confirm()">
确定
</el-button>
</template>
</el-popconfirm>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="16">
<div class="checkbox-container">
<el-checkbox v-model="item.protocolChecked">
我已阅读并同意签署
<a @click.stop="handleViewWord(index)">
《{{ item.companyPersonPhoneKey.companyName }}租赁服务合同》
</a>
</el-checkbox>
</div>
</el-col>
</el-row>
</div>
<div class="protocol-handle" v-if="cardList.length > 0">
<el-row style="margin: 15px 0">
<el-col :span="24">
<el-collapse v-model="activeNames">
<el-collapse-item :title="addressTitle" name="1">
<template v-if="addressList.length > 0">
<div
:key="index"
class="address-item"
@click="onSelectAddress(item.addressName)"
v-for="(item, index) in addressList"
>
{{ item.addressName }}
</div>
</template>
<template v-else>
<div style="width: 100%; text-align: center; font-size: 14px">
当前没有收货地址...
<a
style="
color: #00a288;
cursor: pointer;
margin-left: 5px;
text-decoration: underline;
"
@click="onAddAddress"
> >
点击新增 </template>
</a> <template #actions="{ confirm }">
</div> <el-button size="small">取消</el-button>
</template> <el-button type="danger" size="small" @click="confirm()">
</el-collapse-item> 确定
</el-collapse> </el-button>
</el-col> </template>
</el-row> </el-popconfirm>
<el-row style="display: flex; align-items: center"> </div>
<el-col :span="16"> </el-col>
<!-- <div class="checkbox-container"> </el-row>
<el-row>
<el-col :span="16">
<div class="checkbox-container">
<el-checkbox v-model="item.protocolChecked">
我已阅读并同意签署
<a @click.stop="handleViewWord(index)">
《{{ item.companyPersonPhoneKey.companyName }}租赁服务合同》
</a>
</el-checkbox>
</div>
</el-col>
</el-row>
</div>
<div class="protocol-handle" v-if="cardList.length > 0">
<el-row style="margin: 15px 0">
<el-col :span="24">
<el-collapse v-model="activeNames">
<el-collapse-item :title="addressTitle" name="1">
<template v-if="addressList.length > 0">
<div
:key="index"
class="address-item"
@click="onSelectAddress(item.addressName)"
v-for="(item, index) in addressList"
>
{{ item.addressName }}
</div>
</template>
<template v-else>
<div style="width: 100%; text-align: center; font-size: 14px">
当前没有收货地址...
<a
style="
color: #00a288;
cursor: pointer;
margin-left: 5px;
text-decoration: underline;
"
@click="onAddAddress"
>
点击新增
</a>
</div>
</template>
</el-collapse-item>
</el-collapse>
</el-col>
</el-row>
<el-row style="display: flex; align-items: center">
<el-col :span="16">
<!-- <div class="checkbox-container">
<el-checkbox v-model="protocolChecked"> <el-checkbox v-model="protocolChecked">
我已阅读并同意签署 我已阅读并同意签署
<a @click="handleViewWord"> 《xxxx公司租赁服务合同》 </a> <a @click="handleViewWord"> 《xxxx公司租赁服务合同》 </a>
</el-checkbox> </el-checkbox>
</div> --> </div> -->
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<div> <div>
共：<span style="color: #ff4800; font-weight: bold">{{ 共：<span style="color: #ff4800; font-weight: bold">{{
amountDevice amountDevice
}}</span> }}</span>
件装备 件装备
</div> </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<div class="red-font"> <div class="red-font">
订单总金额：<span style="color: #ff4800; font-weight: bold" 订单总金额：<span style="color: #ff4800; font-weight: bold"
>{{ orderAmountPice }} 元</span >{{ orderAmountPice }} 元</span
> >
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div style="text-align: right"> <div style="text-align: right">
<el-button <el-button
size="small" size="small"
@click="onCartSubmit" @click="onCartSubmit"
style="padding: 6px 24px; background-color: #1abc9c; color: #fff" style="padding: 12px 24px; background-color: #1abc9c; color: #fff"
>提交</el-button >提交</el-button
> >
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div>
<Empty v-if="cardList.length == 0" />
</div> </div>
<Empty v-if="cardList.length == 0" /> <FooterInfo />
<!-- 租赁协议 -->
<el-dialog
v-model="dialogFormVisibleSettleWord"
:title="settleWordTitle"
width="50%"
align-center
destroy-on-close
:close-on-click-modal="false"
>
<!-- <div style="display: flex; justify-content: center"> -->
<!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
<!-- </div> -->
<div v-html="bookCarAgreement"></div>
<div style="display: flex; justify-content: flex-end; margin-bottom: 10px">
<span class="dialog-footer">
<el-button type="primary" @click="dialogFormVisibleSettleWord = false"
>关 闭</el-button
>
<el-button @click="submitBtn" type="success"> 下载 </el-button>
</span>
</div>
<div id="mmm" style="height: 600px"></div>
</el-dialog>
</div> </div>
<FooterInfo />
<!-- 租赁协议 -->
<el-dialog
v-model="dialogFormVisibleSettleWord"
:title="settleWordTitle"
width="50%"
align-center
destroy-on-close
:close-on-click-modal="false"
>
<!-- <div style="display: flex; justify-content: center"> -->
<!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
<!-- </div> -->
<div v-html="bookCarAgreement"></div>
<div style="display: flex; justify-content: flex-end; margin-bottom: 10px">
<span class="dialog-footer">
<el-button type="primary" @click="dialogFormVisibleSettleWord = false"
>关 闭</el-button
>
<el-button @click="submitBtn" type="success"> 下载 </el-button>
</span>
</div>
<div id="mmm" style="height: 600px"></div>
</el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -680,7 +684,7 @@ const dialogFormVisibleSettleWord: any = ref(false)
//租赁服务合同 //租赁服务合同
const handleViewWord = async (index: any) => { const handleViewWord = async (index: any) => {
// 组装参数 // 组装参数
const { companyName, companyId,personPhone } = cardList.value[index].companyPersonPhoneKey const { companyName, companyId, personPhone } = cardList.value[index].companyPersonPhoneKey
let cost = 0 let cost = 0
let detailsList: any = [] let detailsList: any = []
@ -716,7 +720,7 @@ const handleViewWord = async (index: any) => {
companyId, companyId,
cost, cost,
detailsList, detailsList,
personPhone personPhone,
} }
console.log('查询参数', queryParams) console.log('查询参数', queryParams)
@ -727,20 +731,18 @@ const handleViewWord = async (index: any) => {
settleWordTitle.value = '租赁服务合同' settleWordTitle.value = '租赁服务合同'
setTimeout(() => { setTimeout(() => {
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("mmm")); const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('mmm'))
//传递要预览的文件地址即可 //传递要预览的文件地址即可
myDocxPreviewer myDocxPreviewer
.preview( .preview(wordUrl.value)
wordUrl.value .then((res) => {
) console.log('预览完成')
.then((res) => { })
console.log("预览完成"); .catch((e) => {
}) console.log('1111', wordUrl.value)
.catch((e) => { console.log('预览失败', e)
console.log('1111', wordUrl.value) })
console.log("预览失败", e); }, 1000)
});
}, 1000);
} }
// 下载合同为 Word 文件 // 下载合同为 Word 文件
@ -748,7 +750,6 @@ const submitBtn = () => {
window.location.href = wordUrl.value window.location.href = wordUrl.value
} }
// 获取收货地址 // 获取收货地址
const getReceiptGoodsAddress = async () => { const getReceiptGoodsAddress = async () => {
const res: any = await getAddressListApi({}) const res: any = await getAddressListApi({})
@ -779,19 +780,23 @@ getReceiptGoodsAddress()
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
width: 1200px; // width: 1200px;
margin: 0 auto; width: 1552px;
padding: 10px; margin: 15px auto;
min-height: 550px; flex: 1;
// min-height: 550px;
background: #eeeff6; background: #eeeff6;
font-size: 14px; font-size: 16px;
padding: 20px 10px;
background-color: #fff;
border-radius: 15px;
.cart-title { .cart-title {
margin-top: 20px; margin-top: 20px;
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 18px;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
} }
@ -804,6 +809,7 @@ getReceiptGoodsAddress()
.cart-th { .cart-th {
margin: 15px 0; margin: 15px 0;
font-size: 18px;
div { div {
text-align: center; text-align: center;
} }
@ -817,7 +823,6 @@ getReceiptGoodsAddress()
.cart-user-info { .cart-user-info {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px;
.user-name, .user-name,
.user-phone { .user-phone {
@ -835,7 +840,7 @@ getReceiptGoodsAddress()
margin: 15px 0; margin: 15px 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px;
div { div {
text-align: center; text-align: center;
} }
@ -866,7 +871,6 @@ getReceiptGoodsAddress()
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 12px;
} }
.red-font { .red-font {
@ -880,7 +884,6 @@ getReceiptGoodsAddress()
background: #fff; background: #fff;
padding: 8px 12px; padding: 8px 12px;
margin: 10px; margin: 10px;
font-size: 13px;
.checkbox-container a { .checkbox-container a {
color: #ff4800; color: #ff4800;

29
src/views/demand-details/index.vue
View File

@ -334,18 +334,18 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
width: 1200px; width: 1552px;
margin: 0 auto; margin: 15px auto;
padding: 10px; padding: 20px 10px;
background: #eeeff6; background-color: #fff;
font-size: 14px; border-radius: 15px;
.cart-title { .cart-title {
margin-top: 20px; margin-top: 20px;
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 18px;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
} }
@ -434,7 +434,7 @@ onMounted(() => {
background: #fff; background: #fff;
padding: 8px 12px; padding: 8px 12px;
margin: 10px; margin: 10px;
font-size: 13px; font-size: 16px;
.checkbox-container a { .checkbox-container a {
color: #ff4800; color: #ff4800;
@ -444,12 +444,13 @@ onMounted(() => {
} }
.device-info { .device-info {
width: 75%; // width: 75%;
padding: 0 50px;
margin: 20px auto 0; margin: 20px auto 0;
} }
.baseInfo { .baseInfo {
width: 75%; // width: 100%;
margin: 35px auto 0; margin: 35px auto 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -458,6 +459,7 @@ onMounted(() => {
.equipInfo { .equipInfo {
display: flex; display: flex;
padding: 0 50px;
.left { .left {
margin-right: 5px; margin-right: 5px;
@ -480,7 +482,7 @@ onMounted(() => {
margin-top: 10px; margin-top: 10px;
.item { .item {
font-size: 13px; font-size: 26px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #005af2; color: #005af2;
@ -516,7 +518,7 @@ onMounted(() => {
margin-bottom: 18px; margin-bottom: 18px;
.label { .label {
font-size: 14px; font-size: 18px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
// font-weight: 600; // font-weight: 600;
color: #8e8e8e; color: #8e8e8e;
@ -524,7 +526,7 @@ onMounted(() => {
} }
.value { .value {
font-size: 13px; font-size: 16px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
color: #333333; color: #333333;
} }
@ -747,4 +749,7 @@ onMounted(() => {
left: 20px; left: 20px;
} }
} }
.el-breadcrumb {
font-size: 16px;
}
</style> </style>

28
src/views/equip/detail.vue
View File

@ -101,9 +101,9 @@
> >
</div> </div>
<div> <div style="margin-left: 20px">
<el-button <el-button
class="item_btn applyFor primary-lease" class="primary-lease"
type="primary" type="primary"
:disabled=" :disabled="
pageData.isBookCar == 0 || pageData.isBookCar == 0 ||
@ -174,7 +174,7 @@
</div> </div>
<div class="item" v-for="(v, i) in propertyNames" :key="i"> <div class="item" v-for="(v, i) in propertyNames" :key="i">
<div class="label">{{ v.propertyName }}：</div> <div class="label">{{ v.propertyName }}：</div>
<div> <div class="value">
{{ v.propertyValue }} {{ v.propertyValue }}
</div> </div>
</div> </div>
@ -1148,7 +1148,7 @@ const onAddCart = async () => {
margin-top: 10px; margin-top: 10px;
.item { .item {
font-size: 16px; // font-size: 16px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #005af2; color: #005af2;
@ -1166,7 +1166,7 @@ const onAddCart = async () => {
} }
.viewNnum { .viewNnum {
font-size: 13px; font-size: 14px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #bcbcbc; color: #bcbcbc;
@ -1184,7 +1184,7 @@ const onAddCart = async () => {
margin-bottom: 18px; margin-bottom: 18px;
.label { .label {
font-size: 14px; // font-size: 14px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
// font-weight: 600; // font-weight: 600;
color: #8e8e8e; color: #8e8e8e;
@ -1192,7 +1192,7 @@ const onAddCart = async () => {
} }
.value { .value {
font-size: 13px; font-size: 16px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
color: #333333; color: #333333;
} }
@ -1207,7 +1207,7 @@ const onAddCart = async () => {
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
border-radius: 4px; border-radius: 4px;
font-size: 14px; // font-size: 14px;
text-align: center; text-align: center;
} }
@ -1241,7 +1241,7 @@ const onAddCart = async () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
font-size: 14px; // font-size: 14px;
color: #acacac; color: #acacac;
cursor: pointer; cursor: pointer;
@ -1308,7 +1308,7 @@ const onAddCart = async () => {
.fonts { .fonts {
.name { .name {
font-size: 16px; // font-size: 16px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
@ -1319,7 +1319,7 @@ const onAddCart = async () => {
display: flex; display: flex;
.item { .item {
font-size: 12px; // font-size: 12px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #747373; color: #747373;
@ -1384,7 +1384,7 @@ const onAddCart = async () => {
.item { .item {
cursor: pointer; cursor: pointer;
width: calc(100% / 3); width: calc(100% / 3);
font-size: 14px; // font-size: 16px;
// font-family: PingFangSC, PingFang SC; // font-family: PingFangSC, PingFang SC;
// font-weight: 600; // font-weight: 600;
display: flex; display: flex;
@ -1392,13 +1392,15 @@ const onAddCart = async () => {
.label { .label {
color: #8e8e8e; color: #8e8e8e;
width: 100px; width: 160px;
font-size: 18px;
} }
.value { .value {
color: #333333; color: #333333;
flex: 1; flex: 1;
word-break: break-all; word-break: break-all;
font-size: 16px;
// font-family: 'fangsong'; // font-family: 'fangsong';
} }

9
src/views/equip/list.vue
View File

@ -779,7 +779,6 @@ const onHandleDetails = (id: number | string) => {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
.choose { .choose {
margin-top: 10px; margin-top: 10px;
font-size: 14px;
.line { .line {
padding: 14px 0; padding: 14px 0;
@ -790,6 +789,7 @@ const onHandleDetails = (id: number | string) => {
.label { .label {
// width: 100px; // width: 100px;
box-sizing: border-box; box-sizing: border-box;
// padding: 0 15px; // padding: 0 15px;
// background: #f3f3f3; // background: #f3f3f3;
} }
@ -806,7 +806,8 @@ const onHandleDetails = (id: number | string) => {
margin-right: 15px; margin-right: 15px;
cursor: pointer; cursor: pointer;
color: #939393; color: #939393;
font-size: 15px; // font-size: 15px;
font-size: 17px;
line-height: 25px; line-height: 25px;
height: 25px; height: 25px;
@ -861,7 +862,7 @@ const onHandleDetails = (id: number | string) => {
border-radius: 12px; border-radius: 12px;
padding: 10px 20px; padding: 10px 20px;
font-size: 17px; // font-size: 17px;
font-weight: 500; font-weight: 500;
color: #9d9d9d; color: #9d9d9d;
margin-right: 10px; margin-right: 10px;
@ -905,7 +906,7 @@ const onHandleDetails = (id: number | string) => {
.class-container { .class-container {
margin-top: 20px; margin-top: 20px;
font-size: 14px; // font-size: 14px;
color: #ccc; color: #ccc;
a { a {

51
src/views/home/index.vue
View File

@ -145,8 +145,10 @@ const onSelectItem = (type: number) => {
<ul class="left-nav"> <ul class="left-nav">
<!-- 左侧机械名称菜单按钮 --> <!-- 左侧机械名称菜单按钮 -->
<li class="left-filter" @click="onSelectOptions"> <li class="left-filter" @click="onSelectOptions">
{{ selectOptionsValue }} <div>
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon> {{ selectOptionsValue }}
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
</div>
<div class="select-options" v-if="selectOptions"> <div class="select-options" v-if="selectOptions">
<div @click.stop="onSelectItem(1)">分类筛选</div> <div @click.stop="onSelectItem(1)">分类筛选</div>
@ -382,14 +384,14 @@ const onSelectItem = (type: number) => {
} }
.home-index-banner { .home-index-banner {
background-color: #fff; background-color: #fff;
padding: 20px 5px; // padding: 20px 5px;
border-radius: 10px; // border-radius: 10px;
box-sizing: border-box; // box-sizing: border-box;
} }
.home-index { .home-index {
.home-goods { .home-goods {
height: 500px; height: 700px;
display: flex; display: flex;
position: relative; position: relative;
@ -407,7 +409,7 @@ const onSelectItem = (type: number) => {
.left-filter { .left-filter {
margin-top: 10px; margin-top: 10px;
padding: 3px 0; padding: 8px 0;
position: relative; position: relative;
display: flex; display: flex;
align-content: center; align-content: center;
@ -419,20 +421,26 @@ const onSelectItem = (type: number) => {
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
width: 100%;
.select-options { .select-options {
position: absolute; position: absolute;
width: 120%; bottom: 0;
left: 50%; left: 0;
bottom: -65px;
transform: translate(50%, 100%);
// left: 50%;
// bottom: -65px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
transform: translateX(-50%); // transform: translateX(-50%);
background-color: #fff; background-color: #fff;
div { div {
padding: 8px 6px; padding: 10px 30px;
text-align: left; text-align: left;
font-size: 14px; // font-size: 14px;
font-size: 16px;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
color: #333; color: #333;
@ -452,12 +460,12 @@ const onSelectItem = (type: number) => {
// padding-left: 50px; // padding-left: 50px;
display: inline-block; display: inline-block;
margin-top: 10px; margin-top: 10px;
padding: 0 10px; // padding: 0 10px;
color: #000; color: #000;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-size: 16px !important; // font-size: 16px !important;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -474,7 +482,7 @@ const onSelectItem = (type: number) => {
display: none; display: none;
top: 0; top: 0;
left: 270px; left: 270px;
width: 1200px; width: 1242px;
min-height: 100%; min-height: 100%;
max-height: 100%; max-height: 100%;
background-color: #fff; background-color: #fff;
@ -486,18 +494,21 @@ const onSelectItem = (type: number) => {
li { li {
// margin: 10px 0; // margin: 10px 0;
padding: 10px 80px;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center;
// background: orange;
.second-name { .second-name {
width: 160px; // width: 160px;
margin-left: 10px; margin-left: 10px;
} }
span a { span a {
margin: 0 15px; margin: 0 30px;
font-size: 14px; font-size: 16px;
font-weight: normal; font-weight: normal;
color: #333; color: #333;
&:hover { &:hover {
@ -526,6 +537,7 @@ const onSelectItem = (type: number) => {
} }
.right-content { .right-content {
box-sizing: border-box;
flex: 1; flex: 1;
height: 100%; height: 100%;
margin-left: 20px; margin-left: 20px;
@ -533,6 +545,7 @@ const onSelectItem = (type: number) => {
flex-direction: column; flex-direction: column;
.swiper-img { .swiper-img {
margin-top: 20px;
flex: 1; flex: 1;
border-radius: 8px; border-radius: 8px;
} }

413
src/views/order/index.vue
View File

@ -1,92 +1,95 @@
<template> <template>
<div style="width: 100%; background-color: #f5f5f5"> <div style="display: flex; flex-direction: column; height: 100vh">
<Header class="wapper" /> <div style="width: 100%; background-color: #f5f5f5">
</div> <Header class="wapper" />
<div class="container">
<el-breadcrumb separator="/" class="primary-lease">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>提交订单</el-breadcrumb-item>
</el-breadcrumb>
<div class="cart-title">
<div></div>
<div style="margin: 0 8px">提交订单</div>
<div>({{ amountNum }})</div>
</div> </div>
<div class="container">
<el-breadcrumb separator="/" class="primary-lease">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>提交订单</el-breadcrumb-item>
</el-breadcrumb>
<el-row class="cart-th"> <div class="cart-title">
<el-col :span="2"> <div></div>
<!-- <div> <div style="margin: 0 8px">提交订单</div>
<div>({{ amountNum }})</div>
</div>
<el-row class="cart-th">
<el-col :span="2">
<!-- <div>
<el-checkbox v-model="allChecked" @change="onChangeAll" :key="allKey"> <el-checkbox v-model="allChecked" @change="onChangeAll" :key="allKey">
全选 全选
</el-checkbox> </el-checkbox>
</div> --> </div> -->
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div>装备信息</div> <div>装备信息</div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<div>租期</div> <div>租期</div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div>日租金/元</div> <div>日租金/元</div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div>天数</div> <div>天数</div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div>数量</div> <div>数量</div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div>总金额/元</div> <div>总金额/元</div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div>操作</div> <div>操作</div>
</el-col> </el-col>
</el-row> </el-row>
<div class="cart-tbody" v-for="(item, index) in orderList" :key="index"> <div class="cart-tbody" v-for="(item, index) in orderList" :key="index">
<el-row style="border-bottom: 1px solid #ccc"> <el-row style="border-bottom: 1px solid #ccc">
<el-col :span="1"> <el-col :span="1">
<div style="text-align: center"> <div style="text-align: center">
<!-- <el-checkbox <!-- <el-checkbox
v-model="item.isChecked" v-model="item.isChecked"
@change="onChangeCompany($event, index, item)" @change="onChangeCompany($event, index, item)"
> >
</el-checkbox> --> </el-checkbox> -->
</div> </div>
</el-col> </el-col>
<el-col :span="22" class="cart-user-info"> <el-col :span="22" class="cart-user-info">
<div>{{ item.companyName }}</div> <div>{{ item.companyName }}</div>
<div class="user-name">{{ item.person }}</div> <div class="user-name">{{ item.person }}</div>
<div class="user-phone">{{ item.personPhone }}</div> <div class="user-phone">{{ item.personPhone }}</div>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="cart-list"> <el-row class="cart-list">
<el-col :span="1"> <el-col :span="1">
<!-- <div style="text-align: center"> <!-- <div style="text-align: center">
<el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)"> <el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
</el-checkbox> </el-checkbox>
</div> --> </div> -->
</el-col> </el-col>
<el-col :span="9" class="goods-info"> <el-col :span="9" class="goods-info">
<img :src="item.picUrl" alt="" /> <img :src="item.picUrl" alt="" />
<div class="goods-code"> <div class="goods-code">
<div style="font-size: 14px; font-weight: bold">{{ item.deviceName }}</div> <div style="font-size: 14px; font-weight: bold">
<div>装备编号： {{ item.code }}</div> {{ item.deviceName }}
<div>装备型号： {{ item.typeName }}</div> </div>
</div> <div>装备编号： {{ item.code }}</div>
</el-col> <div>装备型号： {{ item.typeName }}</div>
<el-col :span="4">
<div class="lease-date">
<!-- <div>{{ item.lease_date_string }}</div> -->
<div style="margin-bottom: 8px">
{{ item.rentBeginTime }}
<span v-if="item.rentBeginTime && item.rentEndTime">-</span>
{{ item.rentEndTime }}
</div> </div>
<!-- <el-date-picker </el-col>
<el-col :span="4">
<div class="lease-date">
<!-- <div>{{ item.lease_date_string }}</div> -->
<div style="margin-bottom: 8px">
{{ item.rentBeginTime }}
<span v-if="item.rentBeginTime && item.rentEndTime">-</span>
{{ item.rentEndTime }}
</div>
<!-- <el-date-picker
style="width: 100px; margin-top: 10px" style="width: 100px; margin-top: 10px"
v-model="item.lease_date" v-model="item.lease_date"
type="daterange" type="daterange"
@ -94,131 +97,132 @@
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
@change="onLeaseDateChange($event, item)" @change="onLeaseDateChange($event, item)"
/> --> /> -->
<CustomDatePickerButton <CustomDatePickerButton
:modelValue="item.lease_date" :modelValue="item.lease_date"
:companyIndex="index" :companyIndex="index"
:goodsIndex="index" :goodsIndex="index"
type="primary" type="primary"
size="large" size="large"
placeholder="选择日期" placeholder="选择日期"
@onLeaseDateChange="onLeaseDateChange" @onLeaseDateChange="onLeaseDateChange"
/> />
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div class="red-font"> <div class="red-font">
{{ item.dayLeasePrice }} {{ item.dayLeasePrice }}
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div class="red-font" style="color: #0062ff"> <div class="red-font" style="color: #0062ff">
{{ item.days }} {{ item.days }}
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div> <div>
<el-input-number <el-input-number
v-model="item.num" v-model="item.num"
style="width: 100px; margin-left: 10px" style="width: 100px; margin-left: 10px"
:min="1" :min="1"
:max="item.deviceCount" :max="item.deviceCount"
size="small" size="small"
/> />
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div class="red-font" style="margin-left: 20px"> <div class="red-font" style="margin-left: 20px">
{{ item.num * item.dayLeasePrice * item.days }} {{ item.num * item.dayLeasePrice * item.days }}
</div> </div>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<div> <div>
<el-button <el-button
@click="onDeleteGoods(index)" @click="onDeleteGoods(index)"
link link
style="color: #ff4800; font-weight: bold" style="color: #ff4800; font-weight: bold"
> >
删除 删除
</el-button> </el-button>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="protocol-handle"> <div class="protocol-handle">
<el-row style="margin: 15px 0"> <el-row style="margin: 15px 0">
<el-col :span="24"> <el-col :span="24">
<el-collapse v-model="activeNames"> <el-collapse v-model="activeNames">
<el-collapse-item :title="addressTitle" name="1"> <el-collapse-item :title="addressTitle" name="1">
<template v-if="addressList.length > 0"> <template v-if="addressList.length > 0">
<div <div
:key="index" :key="index"
class="address-item" class="address-item"
@click="onSelectAddress(item.addressName)" @click="onSelectAddress(item.addressName)"
v-for="(item, index) in addressList" v-for="(item, index) in addressList"
>
{{ item.addressName }}
</div>
</template>
<template v-else>
<div style="width: 100%; text-align: center; font-size: 14px">
当前没有收货地址...
<a
style="
color: #00a288;
cursor: pointer;
margin-left: 5px;
text-decoration: underline;
"
@click="onAddAddress"
> >
点击新增 {{ item.addressName }}
</a> </div>
</div> </template>
</template>
</el-collapse-item> <template v-else>
</el-collapse> <div style="width: 100%; text-align: center; font-size: 14px">
</el-col> 当前没有收货地址...
</el-row> <a
<el-row style="display: flex; align-items: center"> style="
<el-col :span="16"> color: #00a288;
<div class="checkbox-container"> cursor: pointer;
<el-checkbox v-model="protocolChecked"> margin-left: 5px;
我已阅读并同意签署 text-decoration: underline;
<a href="#"> 《xxxx公司租赁服务合同》 </a> "
</el-checkbox> @click="onAddAddress"
</div> >
</el-col> 点击新增
<el-col :span="3"> </a>
<div> </div>
共：<span style="color: #ff4800; font-weight: bold">{{ </template>
amountDevice </el-collapse-item>
}}</span> </el-collapse>
件装备 </el-col>
</div> </el-row>
</el-col> <el-row style="display: flex; align-items: center">
<el-col :span="3"> <el-col :span="16">
<div class="red-font"> <div class="checkbox-container">
订单总金额：<span style="color: #ff4800; font-weight: bold" <el-checkbox v-model="protocolChecked">
>{{ orderAmountPice }} 元</span 我已阅读并同意签署
> <a href="#"> 《xxxx公司租赁服务合同》 </a>
</div> </el-checkbox>
</el-col> </div>
<el-col :span="2"> </el-col>
<div style="text-align: right"> <el-col :span="3">
<el-button <div>
size="small" 共：<span style="color: #ff4800; font-weight: bold">{{
@click="onCartSubmit" amountDevice
style="padding: 6px 24px; background-color: #1abc9c; color: #fff" }}</span>
>提交</el-button 件装备
> </div>
</div> </el-col>
</el-col> <el-col :span="3">
</el-row> <div class="red-font">
订单总金额：<span style="color: #ff4800; font-weight: bold"
>{{ orderAmountPice }} 元</span
>
</div>
</el-col>
<el-col :span="2">
<div style="text-align: right">
<el-button
size="small"
@click="onCartSubmit"
style="padding: 12px 24px; background-color: #1abc9c; color: #fff"
>提交</el-button
>
</div>
</el-col>
</el-row>
</div>
</div> </div>
<FooterInfo />
</div> </div>
<FooterInfo />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -481,18 +485,22 @@ getReceiptGoodsAddress()
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
width: 1200px; width: 1553px;
margin: 0 auto; margin: 15px auto;
padding: 10px; flex: 1;
// min-height: 550px;
background: #eeeff6; background: #eeeff6;
font-size: 14px; font-size: 16px;
padding: 20px 10px;
background-color: #fff;
border-radius: 15px;
.cart-title { .cart-title {
margin-top: 20px; margin-top: 20px;
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 18px;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
} }
@ -505,6 +513,7 @@ getReceiptGoodsAddress()
.cart-th { .cart-th {
margin: 15px 0; margin: 15px 0;
font-size: 18px;
div { div {
text-align: center; text-align: center;
} }
@ -518,7 +527,7 @@ getReceiptGoodsAddress()
.cart-user-info { .cart-user-info {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; // font-size: 13px;
.user-name, .user-name,
.user-phone { .user-phone {
@ -536,7 +545,7 @@ getReceiptGoodsAddress()
margin: 15px 0; margin: 15px 0;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; // font-size: 13px;
div { div {
text-align: center; text-align: center;
} }
@ -567,7 +576,7 @@ getReceiptGoodsAddress()
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 12px; // font-size: 12px;
} }
.red-font { .red-font {
@ -581,7 +590,7 @@ getReceiptGoodsAddress()
background: #fff; background: #fff;
padding: 8px 12px; padding: 8px 12px;
margin: 10px; margin: 10px;
font-size: 13px; // font-size: 13px;
.checkbox-container a { .checkbox-container a {
color: #ff4800; color: #ff4800;
text-decoration: underline; text-decoration: underline;

10
src/views/parity/index.vue
View File

@ -500,7 +500,7 @@ const onAcceptOrders = (id: any) => {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
.choose { .choose {
margin-top: 20px; margin-top: 20px;
font-size: 14px; // font-size: 14px;
.line { .line {
padding: 14px 0; padding: 14px 0;
@ -527,7 +527,7 @@ const onAcceptOrders = (id: any) => {
margin-right: 15px; margin-right: 15px;
cursor: pointer; cursor: pointer;
color: #939393; color: #939393;
font-size: 15px; font-size: 17px;
line-height: 25px; line-height: 25px;
height: 25px; height: 25px;
@ -582,7 +582,7 @@ const onAcceptOrders = (id: any) => {
border-radius: 12px; border-radius: 12px;
padding: 10px 20px; padding: 10px 20px;
font-size: 17px; // font-size: 17px;
font-weight: 500; font-weight: 500;
color: #9d9d9d; color: #9d9d9d;
margin-right: 10px; margin-right: 10px;
@ -599,7 +599,7 @@ const onAcceptOrders = (id: any) => {
.showList { .showList {
.demand-card { .demand-card {
margin-bottom: 15px; margin-bottom: 15px;
padding: 15px 25px; padding: 20px 25px;
border-radius: 14px; border-radius: 14px;
background-color: #fff; background-color: #fff;
position: relative; position: relative;
@ -608,7 +608,7 @@ const onAcceptOrders = (id: any) => {
.el-row { .el-row {
padding: 10px 0; padding: 10px 0;
font-size: 13px; font-size: 14px;
} }
.count-down { .count-down {