页面样式问题优化

This commit is contained in:
BianLzhaoMin 2024-12-23 14:19:13 +08:00
parent 760abfd218
commit ac72bc580f
11 changed files with 123 additions and 114 deletions

8
components.d.ts vendored
View File

@ -13,14 +13,11 @@ declare module 'vue' {
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElCountdown: typeof import('element-plus/es')['ElCountdown']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
@ -31,20 +28,15 @@ declare module 'vue' {
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElStep: typeof import('element-plus/es')['ElStep']
ElSteps: typeof import('element-plus/es')['ElSteps']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']

7
package-lock.json generated
View File

@ -14,6 +14,7 @@
"@vue-office/docx": "^1.6.2",
"@vueup/vue-quill": "^1.2.0",
"@vueuse/core": "^10.6.1",
"autofit.js": "^3.2.2",
"axios": "^1.6.2",
"element-plus": "^2.4.3",
"file-saver": "^2.0.5",
@ -1549,6 +1550,12 @@
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/autofit.js": {
"version": "3.2.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/autofit.js/-/autofit.js-3.2.2.tgz",
"integrity": "sha512-oo6e5GGhYKrpIgn6/KHzbtvWKm+dk6925wJoz8XGhKw2tlzc+dF9TBaJL/bOXnmpeRR82oxWLBOcOi2WDa6DIw==",
"license": "MIT"
},
"node_modules/aws-sign2": {
"version": "0.7.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/aws-sign2/-/aws-sign2-0.7.0.tgz",

View File

@ -1,59 +1,59 @@
{
"name": "zrpt_front",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite --mode dev",
"serve1": "vite --mode serve1",
"build": "npm run build:pro",
"build:sit": "vite build --mode sit",
"build:uat": "vite build --mode uat",
"build:pro": "vite build --mode production",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@js-preview/docx": "^1.6.2",
"@tinymce/tinymce-vue": "^6.1.0",
"@vue-office/docx": "^1.6.2",
"@vueup/vue-quill": "^1.2.0",
"@vueuse/core": "^10.6.1",
"axios": "^1.6.2",
"element-plus": "^2.4.3",
"file-saver": "^2.0.5",
"force": "^0.0.3",
"js-base64": "^3.7.7",
"mitt": "^3.0.1",
"moment": "^2.29.4",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"pinia-plugin-persist": "^1.0.0",
"quill": "^2.0.3",
"tinymce": "^7.6.0",
"vite-plugin-html": "^3.2.0",
"vite-plugin-zip-file": "^2.2.0",
"vue": "^3.3.4",
"vue-demi": "^0.14.10",
"vue-qrcode": "^2.2.2",
"vue-quill-editor": "^3.0.6",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@tsconfig/node18": "^18.2.2",
"@types/node": "^18.18.5",
"@types/nprogress": "^0.2.3",
"@vitejs/plugin-vue": "^4.4.0",
"@vitejs/plugin-vue-jsx": "^3.0.2",
"@vue/tsconfig": "^0.4.0",
"npm-run-all2": "^6.1.1",
"postcss-px-to-viewport": "^1.1.1",
"sass": "^1.32.13",
"typescript": "~5.2.0",
"unplugin-auto-import": "^0.17.1",
"unplugin-vue-components": "^0.25.2",
"vite": "^4.4.11",
"vue-tsc": "^1.8.19"
}
"name": "zrpt_front",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite --mode dev",
"serve1": "vite --mode serve1",
"build": "npm run build:pro",
"build:sit": "vite build --mode sit",
"build:uat": "vite build --mode uat",
"build:pro": "vite build --mode production",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@js-preview/docx": "^1.6.2",
"@tinymce/tinymce-vue": "^6.1.0",
"@vue-office/docx": "^1.6.2",
"@vueup/vue-quill": "^1.2.0",
"@vueuse/core": "^10.6.1",
"axios": "^1.6.2",
"element-plus": "^2.4.3",
"file-saver": "^2.0.5",
"force": "^0.0.3",
"js-base64": "^3.7.7",
"mitt": "^3.0.1",
"moment": "^2.29.4",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"pinia-plugin-persist": "^1.0.0",
"quill": "^2.0.3",
"tinymce": "^7.6.0",
"vite-plugin-html": "^3.2.0",
"vite-plugin-zip-file": "^2.2.0",
"vue": "^3.3.4",
"vue-demi": "^0.14.10",
"vue-qrcode": "^2.2.2",
"vue-quill-editor": "^3.0.6",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@tsconfig/node18": "^18.2.2",
"@types/node": "^18.18.5",
"@types/nprogress": "^0.2.3",
"@vitejs/plugin-vue": "^4.4.0",
"@vitejs/plugin-vue-jsx": "^3.0.2",
"@vue/tsconfig": "^0.4.0",
"npm-run-all2": "^6.1.1",
"postcss-px-to-viewport": "^1.1.1",
"sass": "^1.32.13",
"typescript": "~5.2.0",
"unplugin-auto-import": "^0.17.1",
"unplugin-vue-components": "^0.25.2",
"vite": "^4.4.11",
"vue-tsc": "^1.8.19"
}
}

View File

@ -81,10 +81,11 @@ const navMenuClick = (name: any) => {
display: flex;
align-items: center;
justify-content: space-around;
font-size: 18px;
li {
color: #7d7d7d;
padding: 10px 20px;
padding: 4px 10px;
// border-right: 1px solid #7d7d7d;
@ -103,7 +104,7 @@ const navMenuClick = (name: any) => {
color: #00a288;
font-weight: bold;
background-color: #c9e7e5;
border-radius: 6px;
border-radius: 8px;
}
}
</style>

View File

@ -320,7 +320,7 @@ const isMyInfoPage = () => {
position: relative;
}
.roles-check .select-list {
height: 50px;
// height: 50px;
// display: none;
position: absolute;
left: 1%;
@ -334,7 +334,7 @@ const isMyInfoPage = () => {
div {
height: 25px;
font-size: 14px;
font-size: 16px;
line-height: 25px;
text-align: center;
letter-spacing: 1px;

View File

@ -667,11 +667,11 @@ const onJumpUser = () => {
input {
width: 100%;
height: 53px;
height: 54px;
display: block;
border: 1px solid #3cb4a6;
border-radius: 20px;
line-height: 53px;
border-radius: 27px;
line-height: 54px;
color: #333;
text-shadow: 0 0 0 #333;
padding-left: 110px;

View File

@ -26,7 +26,7 @@ const classList: any = ref([])
const selectOptions = ref<boolean>(false) //
const selectOptionsValue = ref<string>('分类筛选')
const loopList = ref([swiper_5, swiper_2, swiper_4])
const loopList = ref([swiper_2, swiper_4])
if (userStore.companyList.length === 0) {
getCompanyList()
@ -406,6 +406,7 @@ const onSelectItem = (type: number) => {
background-color: #f7f9fa;
overflow: hidden;
overflow-y: auto;
border-radius: 16px;
.left-filter {
margin-top: 10px;
@ -665,4 +666,8 @@ const onSelectItem = (type: number) => {
:deep(.el-carousel__container) {
height: 100%;
}
.el-carousel--horizontal {
border-radius: 14px;
}
</style>

View File

@ -252,7 +252,7 @@ const isOrderComplete = computed(() => {
</el-col>
<el-col :span="8">
<span> 收货地址 </span>
<span> {{orderDetails.address}} </span>
<span> {{ orderDetails.address }} </span>
</el-col>
</el-row>
@ -275,17 +275,17 @@ const isOrderComplete = computed(() => {
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px"
style="min-height: 100px"
>
<el-image
:src="goods.url"
style="width: 110px; height: 70px"
style="width: 110px; height: 80px"
alt="#"
fit="cover"
/>
<div
style="
min-height: 80px;
min-height: 100px;
flex: 1;
display: flex;
justify-content: space-around;
@ -342,7 +342,7 @@ const isOrderComplete = computed(() => {
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px; width: 100%; font-size: 13px"
style="min-height: 100px; width: 100%; font-size: 13px"
>
<div
style="

View File

@ -634,14 +634,14 @@ const costSubmit = () => {
v-for="(goods, j) in item.detailsList"
:key="j"
class="order-items order-info"
style="min-height: 80px"
style="min-height: 100px"
:style="
j != item.detailsList.length - 1
? 'border-bottom:1px solid #eee'
: ''
"
>
<img :src="goods.url" style="width: 110px; height: 70px" alt="" />
<img :src="goods.url" style="width: 110px; height: 80px" alt="" />
<div
style="
flex: 1;
@ -722,7 +722,7 @@ const costSubmit = () => {
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px"
style="min-height: 100px"
>
<div
style="
@ -734,17 +734,19 @@ const costSubmit = () => {
>
<div>租期</div>
<div
style="font-weight: bold; margin-top: 10px"
style="font-weight: bold; margin-top: 10px; font-size: 13px"
:style="
item.orderStatus == 20
? 'text-decoration: line-through'
: ''
"
>
{{ goods.rentBeginTime }}{{ goods.rentEndTime }}
{{ goods.rentBeginTime.slice(0, 10) }}{{
goods.rentEndTime.slice(0, 10)
}}
</div>
<div
style="font-weight: bold; margin-top: 10px"
style="font-weight: bold; margin-top: 10px; font-size: 13px"
v-if="item.orderStatus == 20"
>
{{ goods.takeOverTime.slice(0, 10) }}{{
@ -764,7 +766,7 @@ const costSubmit = () => {
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px; width: 95%"
style="min-height: 100px; width: 95%"
>
<el-tag :type="orderType(goods.orderStatus)" effect="light">{{
orderText(goods.orderStatus)
@ -782,7 +784,7 @@ const costSubmit = () => {
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px; width: 95%"
style="min-height: 100px; width: 95%"
>
<el-button
v-if="goods.orderStatus == 4"
@ -1478,14 +1480,14 @@ const costSubmit = () => {
width: 100%;
height: 100%;
background: #eeeff6;
font-size: 14px;
// font-size: 14px;
.cart-title {
margin-top: 10px;
padding: 10px 0;
display: flex;
align-items: center;
font-size: 14px;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
}
@ -1506,14 +1508,14 @@ const costSubmit = () => {
.cart-tbody {
background: #fff;
padding: 8px 12px;
margin-bottom: 6px;
margin-bottom: 12px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
.cart-user-info {
display: flex;
align-items: center;
font-size: 13px;
// font-size: 13px;
.code,
.orderTime {
@ -1531,7 +1533,7 @@ const costSubmit = () => {
margin: 15px 0;
display: flex;
align-items: center;
font-size: 13px;
// font-size: 13px;
div {
text-align: center;
@ -1540,7 +1542,7 @@ const costSubmit = () => {
margin: 15px 0;
display: flex;
align-items: center;
font-size: 13px;
// font-size: 13px;
div {
text-align: center;
@ -1573,7 +1575,7 @@ const costSubmit = () => {
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
// font-size: 12px;
}
.red-font {
@ -1586,7 +1588,7 @@ const costSubmit = () => {
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
// font-size: 12px;
}
.red-font {
@ -1600,7 +1602,7 @@ const costSubmit = () => {
background: #fff;
padding: 8px 12px;
margin: 10px;
font-size: 13px;
// font-size: 13px;
.checkbox-container a {
color: #ff4800;
@ -1617,7 +1619,7 @@ const costSubmit = () => {
.order-title-info {
position: relative;
padding: 6px 4px;
font-size: 14px;
font-size: 17px;
color: #999;
.order-type-box {
@ -1644,7 +1646,7 @@ const costSubmit = () => {
align-items: center;
justify-content: center;
border-right: 1px solid #eee;
font-size: 13px;
// font-size: 13px;
}
.red-font {

View File

@ -252,7 +252,7 @@ const isOrderComplete = computed(() => {
</el-col>
<el-col :span="8">
<span> 收货地址 </span>
<span> {{orderDetails.address}} </span>
<span> {{ orderDetails.address }} </span>
</el-col>
</el-row>
@ -275,17 +275,17 @@ const isOrderComplete = computed(() => {
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px"
style="min-height: 100px"
>
<el-image
:src="goods.url"
style="width: 110px; height: 70px"
style="width: 110px; height: 80px"
alt="#"
fit="cover"
/>
<div
style="
min-height: 80px;
min-height: 100px;
flex: 1;
display: flex;
justify-content: space-around;
@ -342,7 +342,7 @@ const isOrderComplete = computed(() => {
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px; width: 100%; font-size: 13px"
style="min-height: 100px; width: 100%; font-size: 13px"
>
<div
style="

View File

@ -889,12 +889,12 @@ const wordUrl = ref('')
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px"
style="min-height: 100px"
>
<img :src="goods.url" style="width: 110px; height: 70px" alt="" />
<img :src="goods.url" style="width: 110px; height: 80px" alt="" />
<div
style="
min-height: 80px;
min-height: 100px;
flex: 1;
display: flex;
justify-content: space-around;
@ -984,7 +984,7 @@ const wordUrl = ref('')
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px"
style="min-height: 100px"
>
<div
style="
@ -996,18 +996,20 @@ const wordUrl = ref('')
>
<div>租期</div>
<div
style="font-weight: bold; margin-top: 10px"
style="font-weight: bold; margin-top: 10px; font-size: 13px"
:style="
item.orderStatus == 20
? 'text-decoration: line-through'
: ''
"
>
{{ goods.rentBeginTime }}{{ goods.rentEndTime }}
{{ goods.rentBeginTime.slice(0, 10) }}{{
goods.rentEndTime.slice(0, 10)
}}
</div>
<div
style="font-weight: bold; margin-top: 10px"
style="font-weight: bold; margin-top: 10px; font-size: 13px"
v-if="item.orderStatus == 20"
>
{{ goods.takeOverTime.slice(0, 10) }}{{
@ -1027,7 +1029,7 @@ const wordUrl = ref('')
? 'border-bottom:1px solid #eee'
: ''
"
style="min-height: 80px; width: 95%"
style="min-height: 100px; width: 95%"
>
<el-tag :type="orderType(goods.orderStatus)" effect="light">{{
orderText(goods.orderStatus)
@ -2097,14 +2099,14 @@ const wordUrl = ref('')
width: 100%;
height: 100%;
background: #eeeff6;
font-size: 14px;
// font-size: 14px;
.cart-title {
margin-top: 10px;
padding: 10px 0;
display: flex;
align-items: center;
font-size: 14px;
// font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
}
@ -2125,7 +2127,7 @@ const wordUrl = ref('')
.cart-tbody {
background: #fff;
padding: 8px 12px;
margin-bottom: 6px;
margin-bottom: 12px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
@ -2299,7 +2301,7 @@ const wordUrl = ref('')
.order-title-info {
position: relative;
padding: 6px 4px;
font-size: 14px;
font-size: 16px;
color: #999;
.order-type-box {
position: absolute;