flying-monkey/pages/project/projectList.vue

339 lines
9.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="content">
<view class="project-list-input">
<input type="text" class="int" value="" placeholder="请输入关键字" />
<image class="search" src="../../static/ss.png" mode=""></image>
</view>
<view class="screen">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="li">
<view class="text">
产品类型
</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill"></image>
</view>
</picker>
<picker mode="date" :value="date" @change="bindDateChange">
<view class="li">
<view class="text">
竣工日期
</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill"></image>
</view>
</picker>
<view class="li">
<view class="text">
筛选
</view>
<image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill"></image>
</view>
</view>
<view class="project-list">
<view class="li">
<view class="message">
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
<view class="text">
<view class="title">
湖南工业大学化工学院会议室P2.5全彩LED显示屏
</view>
<view class="serial-number">
项目编号20220108-1001
</view>
<view class="specification">
规格型号DS-CK25FI/H
</view>
<view class="specification">
产品尺寸3.94*2.02
</view>
<view class="installation-site">
安装位置xxx综合楼2楼会议室
</view>
</view>
</view>
<view class="project-list-address">
<view class="address">
<image class="img" src="../../static/iocn/im.png" mode="aspectFill"></image>
<view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205
</view>
</view>
<view class="date">
2022/01/08
</view>
</view>
<view class="icon iconBer">
质保到期
</view>
</view>
<view class="li">
<view class="message">
<image class="img" src="../../static/del/项目图片.png" mode="aspectFill"></image>
<view class="text">
<view class="title">
湖南工业大学化工学院会议室P2.5全彩LED显示屏
</view>
<view class="serial-number">
项目编号20220108-1001
</view>
<view class="specification">
规格型号DS-CK25FI/H
</view>
<view class="specification">
产品尺寸3.94*2.02
</view>
<view class="installation-site">
安装位置xxx综合楼2楼会议室
</view>
</view>
</view>
<view class="project-list-address">
<view class="address">
<image class="img" src="../../static/iocn/im.png" mode="aspectFill"></image>
<view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205
</view>
</view>
<view class="date">
2022/01/08
</view>
</view>
<view class="icon iconBera">
质保中
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
date: currentDate,
array: ['类型', '类型', '类型', '类型'],
index: 0,
}
},
methods: {
bindPickerChange(data){
console.log(data)
},
bindDateChange(date){
console.log(date)
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
console.log(year,month,day)
return `${year}-${month}-${day}`;
}
}
}
</script>
<style scoped>
page {
background-color: #F7F7F7;
}
.project-list-input {
width: 100%;
height: 114rpx;
position: relative;
padding: 20rpx 16rpx;
box-sizing: border-box;
background-color: #FFFFFF
}
.project-list-input .int {
width: 100%;
height: 100%;
background-color: #F7F7F7;
padding: 0 25rpx;
box-sizing: border-box;
border-radius: 36rpx;
}
.project-list-input .search {
width: 28rpx;
height: 28rpx;
position: absolute;
right: 43rpx;
top: 50%;
margin-top: -14rpx;
}
.screen {
display: flex;
justify-content: space-around;
padding: 46rpx 20rpx;
}
.screen .li {
display: flex;
align-items: center;
}
.screen .li .text {
font-size: 32rpx;
color: #333333;
margin-right: 10rpx;
}
.screen .li .img {
width: 14rpx;
height: 8rpx;
}
.screen .li .imgA {
width: 24rpx;
height: 23rpx;
}
.project-list .li {
width: 710rpx;
box-sizing: border-box;
background-color: #FFFFFF;
position: relative;
margin: auto;
margin-bottom: 20rpx;
padding: 33rpx 23rpx;
}
.project-list .li .icon {
width: 135rpx;
height: 40rpx;
position: absolute;
font-size: 24rpx;
color: #FFFFFF;
right: 23rpx;
line-height: 40rpx;
text-align: center;
background-size: 100% 100%;
top: -10rpx;
}
.project-list .li .iconBer {
background-image: url(../../static/iocn/za.png);
}
.project-list .li .iconBera {
background-image: url(../../static/iocn/zaa.png);
}
.project-list .li .message {
display: flex;
}
.project-list .li .message .img {
width: 230rpx;
margin-right: 11rpx;
height: 180rpx;
}
.project-list .li .message .text {
flex: 1;
}
.project-list .li .message .text .title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
word-break: break-all;
margin-bottom: 15rpx;
font-size: 28rpx;
line-height: 29rpx;
color: #333333;
font-weight: bold;
}
.project-list .li .message .serial-number {
color: #ff8800;
font-size: 24rpx;
margin-bottom: 15rpx;
line-height: 24rpx;
}
.project-list .li .message .specification {
color: #00b1ff;
font-size: 24rpx;
margin-bottom: 15rpx;
line-height: 24rpx;
}
.project-list .li .message .installation-site {
color: #6b6a6a;
font-size: 24rpx;
margin-bottom: 15rpx;
line-height: 24rpx;
}
.project-list-address {
display: flex;
/* justify-content: space-between; */
}
.project-list-address .text {
font-size: 24rpx;
}
.project-list-address .date {
font-size: 24rpx;
text-align: right;
margin-left: 20rpx;
margin-top: 12rpx;
}
.project-list-address .img {
width: 23rpx;
height: 28rpx;
margin-right: 10rpx;
}
.project-list-address .address {
display: flex;
align-items: center;
}
.pickerDate {
width: 300rpx;
height: 300rpx;
}
</style>