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

页面搭建

This commit is contained in:
13218645326 2023-12-06 09:36:45 +08:00
parent 561fa32a42
commit 6cd6ad5f75
12 changed files with 666 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components.d.ts vendored
View File

@ -13,6 +13,7 @@ declare module 'vue' {
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
@ -28,8 +29,11 @@ declare module 'vue' {
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTimeline: typeof import('element-plus/es')['ElTimeline']
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
ElUpload: typeof import('element-plus/es')['ElUpload']
EquipCard: typeof import('./src/components/equipCard.vue')['default']
EquipDetailTable: typeof import('./src/components/equipDetailTable.vue')['default']
FooterInfo: typeof import('./src/components/FooterInfo/index.vue')['default']
FormComponent: typeof import('./src/components/FormComponent/index.vue')['default']
Navmenu: typeof import('./src/components/Navmenu/index.vue')['default']

10
src/router/index.ts
View File

@ -198,6 +198,16 @@ const routes: Array<RouteRecordRaw> = [
keepAlive: true,
AuthFlag: false
},
},
{
path: 'orderConfirm',
name: 'orderConfirm',
component: () => import('views/user/orderManagement/orderCom/orderConfirm.vue'),
meta: {
title: '订单确认',
keepAlive: true,
AuthFlag: false
},
}
]
},

5
src/style/scss/common.module.scss
View File

@ -1,5 +0,0 @@
.button {
border-radius: 3px;
background-color: green;
color: white;
}

4
src/style/scss/index.scss Normal file
View File

@ -0,0 +1,4 @@
@import './variable.scss';
@import './mixin.scss';
@import './common.module.scss';
@import './nprogress.scss';

85
src/style/scss/nprogress.scss Normal file
View File

@ -0,0 +1,85 @@
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: $main-color;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px $main-color, 0 0 5px $main-color;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: $main-color;
border-left-color: $main-color;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

4
src/style/scss/vantReset.scss
View File

@ -1,4 +0,0 @@
.van-button--primary {
background-color: $main-color;
border: $main-color;
}

2
src/style/scss/variable.scss
View File

@ -1,2 +1,2 @@
$main-color: #f00;
$main-color: #2282fe;
$second-color: #666;

135
src/views/user/orderManagement/orderCom/orderConfirm.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<el-page-header @back="goBack">
<template #content>
<span>详情 </span>
</template>
</el-page-header>
<timeLineHorizontal></timeLineHorizontal>
<el-form label-width="130px" inline="true" style="padding: 0 20px 0px 20px;width: 865px;" size="small">
<el-form-item label="订单编号" style="width: 600px;">
xxxxx
</el-form-item>
<el-form-item label="需求单位" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="联系电话" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="租赁时长" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="设备进场地址：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="进场时间：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="是否需求机手：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="详细地址：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="工期时长：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="发票类型：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="项目说明：" style="width: 800px;">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</el-form-item>
<el-form-item label="订单起止时间：" style="width: 800px;">
xxxx-xx-xx ~ xxxx-xx-xx
</el-form-item>
<!-- 表格 -->
<orderTable :tableInfo="tableInfo"></orderTable>
<el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
xxxxxxxxxxxx.pdf
</el-form-item>
<el-form-item label="机手姓名：" class="table_item_sub">
xxxxx
</el-form-item>
<el-form-item label="联系电话：" class="table_item_sub">
xxxxx
</el-form-item>
<el-form-item label="物流司机电话：" style="width: 800px;">
xxxxx
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import orderTable from "./orderTable.vue"
import {reactive} from "vue"
import { MoreFilled } from '@element-plus/icons-vue'
import timeLineHorizontal from "./timeLineHorizontal.vue"
const tableInfo = reactive({
v_equipment_title: "220E履带挖掘机",
v_equipment_code: "88888",
v_equipment_group_type: "挖掘机械",
v_equipment_brand: "挖掘机",
v_equipment_weight: "22吨",
v_equipment_volume: "1立方米",
v_equipment_address: '广东省广州市',
money: '2000',
unit: '月',
imgUrl: ""
})
const timeLineStep = reactive({
list:[
{
content: '订单状态',
timestamp: '需求已提交，等待供应商审核。',
size: 'large',
type: 'primary',
icon: MoreFilled,
},
{
content: '订单状态',
timestamp: '订单已确认，供应商会与您联系，签订合同。',
color: '#0bbd87',
},
{
content: '订单状态',
timestamp: '装备已发出，到货后请及时确认。',
size: 'large',
},
{
content: '订单状态',
timestamp: '租赁进行中。',
type: 'primary',
hollow: true,
last:true
},
{
content: 'Default node',
timestamp: '2018-04-03 20:46',
},
]})
</script>
<style scoped lang="scss">
.table_item {
width: 250px;
height: 20px;
}
.table_item_sub {
width: 250px;
height: 20px;
}
.time_line_item{
display:flex;
justify-content:space-between;
.btn_c{
}
}
</style>

191
src/views/user/orderManagement/orderCom/orderDetails.vue
View File

@ -1,75 +1,142 @@
<template>
<el-page-header @back="goBack">
<template #content>
<span> {{详情}} </span>
<span>详情 </span>
</template>
</el-page-header>
<el-form label-width="130px" inline="true" style="padding: 0 20px 0px 20px;">
<el-form-item label="订单编号">
xxxxx
</el-form-item>
<el-form-item label="需求单位">
xxxxx
</el-form-item>
<el-form-item label="联系电话">
xxxxx
</el-form-item>
<el-form-item label="租赁时长">
xxxxx
</el-form-item>
<el-form-item label="设备进场地址：">
xxxxx
</el-form-item>
<el-form-item label="进场时间：">
xxxxx
</el-form-item>
<el-form-item label="是否需求机手：">
xxxxx
</el-form-item>
<el-form-item label="详细地址：">
xxxxx
</el-form-item>
<el-form-item label="工期时长：">
xxxxx
</el-form-item>
<el-form-item label="发票类型：">
xxxxx
</el-form-item>
<el-form-item label="项目说明：" style="width:500px">
<div>
</div>
</el-form-item>
<el-form-item label="订单起止时间：">
xxxxx
</el-form-item>
<!-- 表格 -->
<el-form-item label="订单合同：">
xxxxx
</el-form-item>
<el-form-item label="机手姓名：">
xxxxx
</el-form-item>
<el-form-item label="联系电话：">
xxxxx
</el-form-item>
物流司机电话：
<el-form-item label="订单状态：">
xxxxx
</el-form-item>
<el-form label-width="130px" inline="true" style="padding: 0 20px 0px 20px;width: 865px;" size="small">
<el-form-item label="订单编号" style="width: 600px;">
xxxxx
</el-form-item>
<el-form-item label="需求单位" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="联系电话" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="租赁时长" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="设备进场地址：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="进场时间：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="是否需求机手：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="详细地址：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="工期时长：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="发票类型：" class="table_item">
xxxxx
</el-form-item>
<el-form-item label="项目说明：" style="width: 800px;">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</el-form-item>
<el-form-item label="订单起止时间：" style="width: 800px;">
xxxx-xx-xx ~ xxxx-xx-xx
</el-form-item>
<!-- 表格 -->
<orderTable :tableInfo="tableInfo"></orderTable>
<el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
xxxxxxxxxxxx.pdf
</el-form-item>
<el-form-item label="机手姓名：" class="table_item_sub">
xxxxx
</el-form-item>
<el-form-item label="联系电话：" class="table_item_sub">
xxxxx
</el-form-item>
<el-form-item label="物流司机电话：" style="width: 800px;">
xxxxx
</el-form-item>
<el-timeline style="margin-left:20px;width:560px;">
<el-timeline-item v-for="(item, index) in activities" :key="index" :icon="item.icon" :type="item.type"
:color="item.color" :size="item.size" :hollow="item.hollow" :timestamp="item.timestamp">
<div class="time_line_item">
<div class="title">
{{ item.content }}
</div>
<div class="btn_c" >
<el-button type="primary" v-if="item.last">确认到货</el-button>
</div>
</div>
</el-timeline-item>
</el-timeline>
</el-form>
</template>
<script setup lang="ts">
import {reactive} from "vue"
import orderTable from "./orderTable.vue"
import { MoreFilled } from '@element-plus/icons-vue'
const tableInfo = reactive({
v_equipment_title: "220E履带挖掘机",
v_equipment_code: "88888",
v_equipment_group_type: "挖掘机械",
v_equipment_brand: "挖掘机",
v_equipment_weight: "22吨",
v_equipment_volume: "1立方米",
v_equipment_address: '广东省广州市',
money: '2000',
unit: '月',
imgUrl: ""
})
const activities = [
{
content: '订单状态',
timestamp: '需求已提交，等待供应商审核。',
size: 'large',
type: 'primary',
icon: MoreFilled,
},
{
content: '订单状态',
timestamp: '订单已确认，供应商会与您联系，签订合同。',
color: '#0bbd87',
},
{
content: '订单状态',
timestamp: '装备已发出，到货后请及时确认。',
size: 'large',
},
{
content: '订单状态',
timestamp: '租赁进行中。',
type: 'primary',
hollow: true,
last:true
},
{
content: 'Default node',
timestamp: '2018-04-03 20:46',
},
]
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.table_item {
width: 250px;
height: 20px;
}
.table_item_sub {
width: 250px;
height: 20px;
}
.time_line_item{
display:flex;
justify-content:space-between;
.btn_c{
}
}
</style>

190
src/views/user/orderManagement/orderCom/orderTable.vue Normal file
View File

@ -0,0 +1,190 @@
<template>
<el-table :data="[{
name: ''
}]" border :header-cell-class-name="headerClassName" style="width: 100%">
<el-table-column label="装备" min-width="200">
<template #default="scope">
<div class="equipData">
<div class="name">
{{ props.tableInfo.v_equipment_title }}
</div>
<div class="desc">
<div class="Img">
<img :src="props.tableInfo.imgUrl">
</div>
<div class="state">
<div class="item">
<div class="label">
装备编号：
</div>
<div class="value">
{{ props.tableInfo.v_equipment_title }}
</div>
</div>
<div class="item">
<div class="label">
装备类别：
</div>
<div class="value">
{{ props.tableInfo.v_equipment_code }}
</div>
</div>
<div class="item">
<div class="label">
装备组别：
</div>
<div class="value">
{{ props.tableInfo.v_equipment_group_type }}
</div>
</div>
<div class="item">
<div class="label">
品牌 ：
</div>
<div class="value">
{{ props.tableInfo.v_equipment_brand }}
</div>
</div>
<div class="item item_sub_out">
<div class="label">
设备规格：
</div>
<div class="value">
<div class="sub_item">
<div class="sub_label">
操作重量：
</div>
<div class="sub_value">
{{ props.tableInfo.v_equipment_weight }}
</div>
</div>
<div class="sub_item">
<div class="sub_label">
铲斗容量：
</div>
<div class="sub_value">
{{ props.tableInfo.v_equipment_volume }}
</div>
</div>
</div>
</div>
<div class="item">
<div class="label">
设备位置：
</div>
<div class="value">
{{ props.tableInfo.v_equipment_address }}
</div>
</div>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="租金" min-width="120">
<template #default="scope">
<span style="color:#f00;"> {{ props.tableInfo.money }}</span>/{{ props.tableInfo.unit }}
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
const props = defineProps({
tableInfo: {
type: Object,
default: {}
}
})
const headerClassName = () => {
return 'headerColor'
}
</script>
<style lang="scss" scoped>
:deep(.headerColor) {
background: #3E98FF !important;
color: white !important;
}
.equipData {
height: 220px;
.name {
font-size: 16px;
font-weight: 600;
color: black;
}
.desc {
display: flex;
margin-top: 10px;
.Img {
width: 150px;
height: 150px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
background: #e5e5e5;
overflow: hidden;
margin-right: 10px;
img {
width: 100%;
max-height: 100%;
object-fit: contain;
}
}
.state {
flex: 1;
.item {
display: flex;
align-items: center;
.label {
width: 80px;
text-align: right;
color: #858585;
}
.value {
color: black;
}
}
.item_sub_out {
height: 46px;
display: flex;
align-items: center;
.sub_item {
display: flex;
align-items: flex-start;
.label {
width: 80px;
text-align: right;
color: #858585;
}
.value {
color: black;
}
}
}
}
}
.money_c{
color:#f00;
}
}</style>

107
src/views/user/orderManagement/orderCom/timeLineHorizontal.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div class="processBox">
<div class="title">工程进度</div>
<el-divider />
<div class="timelineProcessBox">
<el-timeline class="timeline">
<el-timeline-item
class="lineitem"
:class="item.done ? 'active' : 'inactive'"
v-for="(item, index) in activities"
:key="index"
:timestamp="item.time"
>
<div>
{{ item.content }}
</div>
</el-timeline-item>
</el-timeline>
</div>
</div>
</template>
<script lang="ts" setup>
const activities = [
{
content: '开工阶段',
time: '2018-04-12 20:46',
people: '五六七',
done: true,
},
{
content: '实施阶段',
people: '吉吉国王',
done: true,
time: '2018-04-03 20:46',
},
{
content: '竣工阶段',
done: false,
people: '熊大',
time: '2018-04-03 20:46',
},
{
content: '结算阶段',
people: '',
done: false,
time: '',
},
]
</script>
<style lang="scss" scoped>
.processBox {
background-color: #fff;
height: 210px;
.title {
font-size: 16px;
font-weight: 600;
padding-left: 32px;
padding-top: 16px;
}
.timelineProcessBox {
.timeline {
display: flex;
width: 95%;
margin: 40px auto;
.lineitem {
transform: translateX(50%);
width: 25%;
}
}
}
}
:deep(.el-timeline-item__tail) {
border-left: none;
border-top: 2px solid #e4e7ed;
width: 100%;
position: absolute;
top: 6px;
}
:deep(.el-timeline-item__wrapper) {
padding-left: 0;
position: absolute;
top: 20px;
transform: translateX(-50%);
text-align: center;
}
:deep(.el-timeline-item__timestamp) {
font-size: 14px;
}
.active {
border: none!important;
:deep(.el-timeline-item__node) {
background-color: $main-color;
}
:deep(.el-timeline-item__tail) {
border-color: $main-color;
}
}
// 有active样式的下一个li
.active + li {
:deep(.el-timeline-item__node) {
background-color: $main-color;
}
}
</style>

3
vite.config.ts
View File

@ -68,8 +68,7 @@ export default ({ mode }: any) => {
preprocessorOptions: {
scss: {
// 两种方式都可以
additionalData: ''
// "@import '@/style/scss/index.scss';"
additionalData: "@import '@/style/scss/index.scss';"
}
}