Skip to content

M
mes-ui
Commit 4466c659 authored by luo ying's avatar luo ying
Browse files
Options

配置组建Vcard

parent 87d7e6fc
Hide whitespace changes
Inline Side-by-side
Showing with 922 additions and 86 deletions
components/page/Vcard copy.vue 0 → 100644
View file @ 4466c659
<template>
<div class="cardPage">
<div
class="cardBox"
:class="{ borderCss: isCard }"
@click="clickCard(columns)"
:columns="columns"
>
<p class="topCard lh40 flex pr" slot="header">
<span class="checkSingle" >
<slot name="checkBox" v-if="checkKey">
<Checkbox
v-model="single"
@on-change="singleChange(single, columns)"
></Checkbox>
</slot>
</span>
<span class="titleName f14 fwBold zh-ellip ml20">
<slot name="title">
{{ columns.topTitle }}
</slot>
</span>
<span class="f14 fwBold zh-ellip topCount">
<slot name="topCount">
{{ columns.topCount }}
</slot>
</span>
<span
class="triangle pa"
v-show="columns.borCol"
:style="{
'border-color':
'transparent ' + columns.borCol + columns.borCol + ' transparent',
}"
></span>
<span class="triangleName pa f12 fwBold" v-show="columns.borCol">{{
columns.markerName
}}</span>
</p>
<div class="countCard">
<div class="mainCount flex" slot="main">
<div class="imgBox" >
<slot name="img" v-if="showImgBox" >
<img :src="columns.srcImg" alt="图片"/>
</slot>
</div>
<div class="rightCount mr20 mt20 ml20" >
<!-- <Filed :span="24" :name="v.name" v-for="(v, i) in columns.filedList" :key="i">
{{ v.content}}
<Icon class="blueFont" type="md-sync" v-if="v.name == '工时：'"
/></Filed> -->
<slot name="fileLine" >
<Filed :span="24" :name="columns.countName4">
{{ columns.content4 }}
<!-- <Icon class="blueFont" type="md-sync" v-if="countIcon" /> -->
</Filed>
</slot>
</div>
</div>
<div class="bottomCard flex" slot="footer">
<span class="earlyWarn f14 fwBold mr20" v-if="columns.leftT1">
<Icon
:type="columns.oneIcon"
class="iconStyle"
v-show="iconShow"
/>{{ columns.leftT1 }}
</span>
<span class="overdue f14 fwBold mr20" v-if="columns.leftT2">
<Icon
:type="columns.twoIcon"
class="iconStyle"
v-show="iconShow"
/>{{ columns.leftT2 }}
</span>
<span class="rightMore">
<span
class="mr20"
@click="lookBtn(columns.id)"
v-if="columns.lookName"
>
<a
><Icon :type="columns.lookIcon" class="iconStyle" />{{
columns.lookName
}}</a
>
</span>
<span class="mr20 elliPsis fwBold" v-show="moreTrue" slot="extra">
<span class="elliPsisSpan">•••</span>
<span class="showMore hide">
<a v-if="columns.editName">
<span class="mr20" @click="editBtn(columns.id)">
<Icon :type="columns.editIcon" class="iconStyle" />
{{ columns.editName }}
</span>
</a>
<a v-if="columns.delName">
<span class="mr20" @click="delBtn(columns.id)">
<Icon :type="columns.delIcon" class="iconStyle" />{{
columns.delName
}}</span
>
</a>
</span>
</span>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "cardPage",
data() {
return {
// countIcon:this.countIcon , //中间刷新页面
// iconShow: this.iconShow, //是否有icon
// moreTrue: this.moreTrue, //详情
// checkKey: this.checkKey, //是否展示选择框
// showImgBox: this.showImgBox, //图片展示
single: false, //是否选中
isCard: false,
// columns:this.columns
// columns: {
// id: "1",
// borCol: "#2680eb",
// topTitle: "文档标题标题",
// topCount: "DDBH_20200519_1",
// markerName: "暂停中",
// srcImg: require("../../assets/images/logo.png"),
// leftT1: "预警",
// oneIcon: "ios-information-circle-outline",
// leftT2: "超期",
// twoIcon: "ios-alarm-outline",
// lookName: "详情",
// lookIcon: "ios-paper",
// editName: "编辑",
// editIcon: "ios-create-outline",
// delName: "删除",
// delIcon: "ios-trash-outline",
// countName1: "创建人：",
// content1: "张三",
// countName2: "创建时间：",
// content2: "今天",
// countName3: "创建人：",
// content3: "张三",
// countName4: "计划时间：",
// content4: "2020-10-10---2020-11-10",
// countName5: "",
// content5:
// "文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明。",
// countName6: "成员：",
// content6: "张三",
// countName7: "工时：",
// content7: "3天4小时",
// filedList: [
// { name: "创建人：", content: "张三" },
// { name: "创建时间：", content: "今天" },
// { name: "计划时间：", content: "2020-10-10---2020-11-10" },
// {
// name: "",
// content:
// "文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明。",
// },
// { name: "成员：", content: "张三" },
// { name: "工时：", content: "3天4小时" },
// ],
// },
};
},
props: {
// columns: {
// type: Object,
// default: {},
// },
// moreTrue: {
// type: Boolean,
// default: false,
// },
multiple: {
type: Boolean,
default: false,
},
img: {
type: Boolean,
default: false,
},
life:{
type: Object,
}
// moreTrue: {
// type: Boolean,
// default: false,
// },
// iconShow: {
// type: Boolean,
// default: false,
// },
// countIcon: {
// type: Boolean,
// default: false,
// },
},
created() {
// this.columns=this.row
console.log("传过来的值：", this.columns);
},
methods: {
lookBtn(id) {
console.log("详情", id);
event.stopPropagation();
},
editBtn(id) {
console.log("编辑", id);
event.stopPropagation();
},
delBtn(id) {
console.log("删除", id);
event.stopPropagation();
},
clickCard(columns) {
//点击整个card
console.log(columns);
this.isCard = !this.isCard;
this.single = !this.single;
},
singleChange(v, columns) {
console.log(v, columns);
event.stopPropagation();
},
},
};
</script>
<style lang="less" scoped>
.cardBox {
box-sizing: border-box;
width: 498px;
background: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
.topCard {
height: 40px;
background: rgba(38, 128, 235, 0.2);
border-radius: 8px 8px 0px 0px;
border-bottom: 1px dashed #2680eb;
.checkSingle {
margin-left: 16px;
// margin-right: 24px;
}
.titleName {
width: 190px;
}
.topCount {
max-width: 205px;
}
/* css3绘制三角形 */
.triangle {
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid; /*定义的是实现边框*/
border-radius: 4px;
transform: rotate(-90deg);
right: 0;
top: 0;
}
.triangleName {
right: -5px;
top: -1px;
transform: rotate(45deg);
color: #ffffff;
}
}
.countCard {
height: auto;
.imgBox {
height: 178px;
// width: 178px;
max-width: 178px;
margin: 20px 0px 23px 14px;
border: 1px dashed #232323;
}
.rightCount {
// width: calc(100% - 192px);
min-width: calc(100% - 212px);
.filed-col {
display: inline-flex;
margin-bottom: 6px;
}
.filed-col > .value {
text-indent: 2em !important;
}
.blueFont {
margin-left: 5px;
color: #2680eb;
}
}
.bottomCard {
padding-bottom: 20px;
padding-left: 14px;
.earlyWarn {
color: #ffa000;
}
.overdue {
color: #fe7777;
}
.rightMore {
margin-left: auto;
.elliPsis {
color: #2680eb;
}
.elliPsis:hover {
.showMore {
display: inline-block;
}
.elliPsisSpan {
display: none;
}
}
}
.iconStyle {
margin-right: 4px;
}
}
}
img {
height: 100%;
width: 100%;
}
}
.cardBox:hover {
box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
.topCard {
background: rgba(38, 128, 235, 0.4);
}
}
.borderCss {
border: 2px solid #2680eb;
}
</style>
\ No newline at end of file
components/page/Vcard.vue 0 → 100644
View file @ 4466c659
<template>
<div class="cardPage">
<div
class="cardBox"
:class="{ borderCss: isCard }"
@click="clickCard(columns)"
:columns="columns"
>
<p class="topCard lh40 flex pr" slot="header">
<span class="checkSingle" v-if="multiple">
<slot name="multiple">
<Checkbox
v-model="single"
@on-change="singleChange(single, columns)"
></Checkbox>
</slot>
</span>
<span class="titleName f14 fwBold zh-ellip ml20">
<slot name="title">
{{ columns.topTitle }}
</slot>
</span>
<span class="f14 fwBold zh-ellip topCount">
<slot name="topCount">
{{ columns.topCount }}
</slot>
</span>
<span
class="triangle pa"
v-show="columns.borCol"
:style="{
'border-color':
'transparent ' + columns.borCol + columns.borCol + ' transparent',
}"
></span>
<span class="triangleName pa f12 fwBold" v-show="columns.borCol">{{
columns.markerName
}}</span>
</p>
<div class="countCard">
<div class="mainCount flex" slot="main">
<div class="imgBox" v-if="img">
<slot name="img">
<img :src="columns.srcImg" v-if="columns.srcImg" alt="图片" />
<div
v-else-if="
columns.srcImg == null || columns.srcImg == underfined
"
>
无图片
</div>
<img :src="srcImg1" v-else alt="图片" />
</slot>
</div>
<div class="rightCount mr20 mt20 ml20">
<slot name="fileLine">
<Filed :name="columns.countName4">
{{ columns.content4 }}
<Icon class="blueFont" type="md-sync" />
</Filed>
</slot>
</div>
</div>
<div class="bottomCard flex" slot="footer">
<div v-if="leftBottom">
<span class="earlyWarn f14 fwBold mr20">
<slot name="leftBottom">
<Icon :type="columns.oneIcon" class="iconStyle" />{{
columns.leftT1
}}
<!-- v-show="leftBtmicon" -->
</slot>
</span>
<span class="overdue f14 fwBold mr20">
<slot name="leftBottom2">
<Icon :type="columns.twoIcon" class="iconStyle" />{{
columns.leftT2
}}
<!-- v-show="leftBtmicon2" -->
</slot>
</span>
</div>
<span class="rightMore" v-if="rightBottom">
<slot name="rightBottom">
<span class="mr20" @click="lookBtn(columns.id)">
<a
><Icon :type="columns.lookIcon" class="iconStyle" />{{
columns.lookName
}}</a
>
</span>
<span class="mr20 elliPsis fwBold">
<span class="elliPsisSpan">•••</span>
<span class="showMore hide">
<a v-if="columns.editName">
<span class="mr20" @click="editBtn(columns.id)">
<Icon :type="columns.editIcon" class="iconStyle" />
{{ columns.editName }}
</span>
</a>
<a v-if="columns.delName">
<span class="mr20" @click="delBtn(columns.id)"
><Icon :type="columns.delIcon" class="iconStyle" />
{{ columns.delName }}</span
>
</a>
</span>
</span>
</slot>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "cardPage",
data() {
return {
single: false, //是否选中
isCard: false,
// leftBottom: false, //左侧底部是否显示
// rightBottom: false, //右侧底部是否显示
columns: {},
srcImg1: require("../../assets/imgicon/chan_Pin.png"),
};
},
props: {
// columns: {
// type: Object,
// default: {},
// },
multiple: {
type: Boolean,
default: false,
},
img: {
type: Boolean,
default: false,
},
moreTrue: {
type: Boolean,
default: false,
},
leftBottom: {
//底部左侧显示
type: Boolean,
default: false,
},
rightBottom: {
//底部右侧显示
type: Boolean,
default: false,
},
// leftBtmicon:{//底部左侧图标
// type: Boolean,
// default: false,
// },
// leftBtmicon2:{
// type: Boolean,
// default: false,
// },
},
created() {
// this.columns=this.row
// console.log("传过来的值：", this.columns);
},
methods: {
lookBtn(id) {
console.log("详情", id);
event.stopPropagation();
},
editBtn(id) {
console.log("编辑", id);
event.stopPropagation();
},
delBtn(id) {
console.log("删除", id);
event.stopPropagation();
},
clickCard(columns) {
//点击整个card
console.log(columns);
this.isCard = !this.isCard;
this.single = !this.single;
},
singleChange(v, columns) {
console.log(v, columns);
event.stopPropagation();
},
},
};
</script>
<style lang="less" scoped>
.cardBox {
box-sizing: border-box;
width: 498px;
background: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
.topCard {
height: 40px;
background: rgba(38, 128, 235, 0.2);
border-radius: 8px 8px 0px 0px;
border-bottom: 1px dashed #2680eb;
.checkSingle {
margin-left: 16px;
// margin-right: 24px;
}
.titleName {
width: 190px;
}
.topCount {
max-width: 205px;
}
/* css3绘制三角形 */
.triangle {
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid; /*定义的是实现边框*/
border-radius: 4px;
transform: rotate(-90deg);
right: 0;
top: 0;
}
.triangleName {
right: -5px;
top: -1px;
transform: rotate(45deg);
color: #ffffff;
}
}
.countCard {
height: auto;
.imgBox {
height: 178px;
max-width: 178px;
margin: 20px 0px 23px 14px;
border: 1px dashed #232323;
div {
line-height: 178px;
text-align: center;
width: 178px;
}
}
.rightCount {
min-width: calc(100% - 212px);
.filed-col {
display: flex;
margin-bottom: 6px;
}
.filed-col > .value {
text-indent: 2em !important;
}
.blueFont {
margin-left: 5px;
color: #2680eb;
}
}
.bottomCard {
padding-bottom: 20px;
padding-left: 14px;
.leftBtm {
display: inline-block;
}
.earlyWarn {
color: #ffa000;
}
.overdue {
color: #fe7777;
}
.rightMore {
margin-left: auto;
.elliPsis {
color: #2680eb;
}
.elliPsis:hover {
.showMore {
display: inline-block;
}
.elliPsisSpan {
display: none;
}
}
}
.iconStyle {
margin-right: 4px;
}
}
}
img {
height: 100%;
width: 100%;
}
}
.cardBox:hover {
box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
.topCard {
background: rgba(38, 128, 235, 0.4);
}
}
.borderCss {
border: 2px solid #2680eb;
}
</style>
\ No newline at end of file
pages/cardList/index.vue
View file @ 4466c659
<template> <template>
<div class="cardPage"> <div class="cardPage">
<div class="cardBox" :class="{ borderCss: isCard }" @click="clickCard"> <div
<p class="topCard lh40 flex pr"> class="cardBox"
<span class="checkSingle" :class="{ borderCss: isCard }"
><Checkbox v-model="single" @on-change="singleChange"></Checkbox @click="clickCard(columns)"
:columns="columns"
>
<p class="topCard lh40 flex pr" slot="header">
<span class="checkSingle" v-if="checkKey">
<Checkbox
v-model="single"
@on-change="singleChange(single, columns)"
></Checkbox>
</span>
<span class="titleName f14 fwBold zh-ellip ml20">{{
columns.topTitle
}}</span>
<span class="f14 fwBold zh-ellip topCount">{{ columns.topCount }}</span>
<span
class="triangle pa"
v-show="columns.borCol"
:style="{
'border-color':'transparent ' + columns.borCol + columns.borCol + ' transparent',
}"
></span> ></span>
<span class="titleName f14 fwBold">文档标题标题</span> <span class="triangleName pa f12 fwBold" v-show="columns.borCol">{{
<span class="f14 fwBold">DDBH_20200519_1</span> columns.markerName
<span class="triangle pa"></span> }}</span>
<span class="triangleName pa f12 fwBold">暂停中</span>
</p> </p>
<div class="countCard"> <div class="countCard">
<div class="mainCount flex"> <div class="mainCount flex">
<div class="imgBox"> <div class="imgBox" slot="countLeft" v-if="showImgBox">
<img src="../../assets/images/logo.png" alt="图片" /> <img :src="columns.srcImg" alt="图片" />
</div> </div>
<div class="rightCount mr20 mt20"> <div class="rightCount mr20 mt20 ml20" slot="countRight">
<Filed :span="24" name="创建人：">张三</Filed> <!-- <Filed :span="24" :name="v.name" v-for="(v, i) in columns.filedList" :key="i">
<Filed :span="24" name="创建时间："> 今天 </Filed> {{ v.content}}
<Filed :span="24" name=" 计划时间：">aaaaa</Filed> <Icon class="blueFont" type="md-sync" v-if="v.name == '工时：'"
<Filed :span="24" name="ssss:">aaaaa</Filed> /></Filed> -->
<Filed :span="24" name="" <!-- <Filed :span="24" :name="columns.countName1">
>文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明。</Filed {{ columns.content1 }}
> </Filed>
<Filed :span="24" name="成员:">aaaaa</Filed> <Filed :span="24" :name="columns.countName2">
<Filed :span="24" name="工时:">aaaaa</Filed> {{ columns.content2 }}
</Filed>
<Filed :span="24" :name="columns.countName3">
{{ columns.content3 }}
</Filed>
<Filed :span="24" :name="columns.countName4">
{{ columns.content4 }}
</Filed>
<Filed :span="24" :name="columns.countName5">
{{ columns.content5 }}
</Filed>
<Filed :span="24" :name="columns.countName6">
{{ columns.content6 }}
</Filed> -->
<Filed :span="24" :name="columns.countName7" slot="countLine">
{{ columns.content7 }}
<Icon class="blueFont" type="md-sync" v-if="countIcon" />
</Filed>
</div> </div>
</div> </div>
<div class="bottomCard flex">
<span class="earlyWarn f14 fwBold mr20" <div class="bottomCard flex" slot="footer">
><Icon <div class="leftBtm" v-if="leftBottom">
type="ios-information-circle-outline" <span class="earlyWarn f14 fwBold mr20">
class="iconStyle" <slot name="leftBottom">
/>预警</span <Icon
> :type="columns.oneIcon"
<span class="overdue f14 fwBold mr20" class="iconStyle"
><Icon type="ios-alarm-outline " class="iconStyle" />超期</span v-show="iconShow"
> />{{ columns.leftT1 }}
</slot>
</span>
<span class="overdue f14 fwBold mr20">
<slot name="leftBottom2">
<Icon
:type="columns.twoIcon"
class="iconStyle"
v-show="iconShow"
/>{{ columns.leftT2 }}
</slot>
</span>
</div>
<span class="rightMore"> <span class="rightMore">
<span class="mr20" @click="lookBtn" <span
><a class="mr20"
><Icon type="ios-search-outline" class="iconStyle" />详情</a @click="lookBtn(columns.id)"
></span v-if="columns.lookName"
> >
<span class="mr20 elliPsis fwBold"> <a
><Icon :type="columns.lookIcon" class="iconStyle" />{{
columns.lookName
}}</a
>
</span>
<span class="mr20 elliPsis fwBold" v-show="moreTrue" slot="extra">
<span class="elliPsisSpan">•••</span> <span class="elliPsisSpan">•••</span>
<span class="showMore hide"> <span class="showMore hide">
<a <a v-if="columns.editName">
><span class="mr20" @click="editBtn" <span class="mr20" @click="editBtn(columns.id)">
><Icon <Icon :type="columns.editIcon" class="iconStyle" />
type="ios-paper-outline" {{ columns.editName }}
class="iconStyle" </span>
/>编辑</span </a>
></a <a v-if="columns.delName">
> <span class="mr20" @click="delBtn(columns.id)">
<a <Icon :type="columns.delIcon" class="iconStyle" />{{
><span class="mr20" @click="delBtn" columns.delName
><Icon }}</span
type="ios-trash-outline" >
class="iconStyle" </a>
/>删除</span
></a
>
</span> </span>
</span> </span>
</span> </span>
...@@ -76,27 +127,122 @@ export default { ...@@ -76,27 +127,122 @@ export default {
name: "cardPage", name: "cardPage",
data() { data() {
return { return {
leftBottom:true,
// countIcon:this.countIcon , //中间刷新页面
// iconShow: this.iconShow, //是否有icon
// moreTrue: this.moreTrue, //详情
// checkKey: this.checkKey, //是否展示选择框
// showImgBox: this.showImgBox, //图片展示
countIcon: true, //中间刷新页面
iconShow: true, //是否有icon
moreTrue: true, //详情
checkKey: true, //是否展示选择框
showImgBox: true, //图片展示
single: false, //是否选中
isCard: false, isCard: false,
single: false, columns: {
isShow: false, id: "1",
borCol: "#2680eb",
topTitle: "文档标题标题",
topCount: "DDBH_20200519_1",
markerName: "暂停中",
srcImg: require("../../assets/images/logo.png"),
leftT1: "预警",
oneIcon: "ios-information-circle-outline",
leftT2: "超期",
twoIcon: "ios-alarm-outline",
lookName: "详情",
lookIcon: "ios-paper",
editName: "编辑",
editIcon: "ios-create-outline",
delName: "删除",
delIcon: "ios-trash-outline",
countName1: "创建人：",
content1: "张三",
countName2: "创建时间：",
content2: "今天",
countName3: "创建人：",
content3: "张三",
countName4: "计划时间：",
content4: "2020-10-10---2020-11-10",
countName5: "",
content5:
"文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明。",
countName6: "成员：",
content6: "张三",
countName7: "工时：",
content7: "3天4小时",
// filedList: [
// { name: "创建人：", content: "张三" },
// { name: "创建时间：", content: "今天" },
// { name: "计划时间：", content: "2020-10-10---2020-11-10" },
// {
// name: "",
// content:
// "文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明文档详细说明。",
// },
// { name: "成员：", content: "张三" },
// { name: "工时：", content: "3天4小时" },
// ],
},
}; };
}, },
// props: {
// columns: {
// type: Object,
// default: {},
// },
// moreTrue: {
// type: Boolean,
// default: false,
// },
// checkKey: {
// type: Boolean,
// default: false,
// },
// showImgBox: {
// type: Boolean,
// default: false,
// },
// moreTrue: {
// type: Boolean,
// default: false,
// },
// iconShow: {
// type: Boolean,
// default: false,
// },
// countIcon: {
// type: Boolean,
// default: false,
// },
// },
created() {
// this.columns=this.row
// console.log("传过来的值：", this.columns);
},
methods: { methods: {
lookBtn() { lookBtn(id) {
alert("详情"); console.log("详情", id);
event.stopPropagation();
}, },
editBtn() { editBtn(id) {
alert("编辑"); console.log("编辑", id);
event.stopPropagation();
}, },
delBtn() { delBtn(id) {
alert("删除"); console.log("删除", id);
event.stopPropagation();
}, },
clickCard() { clickCard(columns) {
//点击整个card
console.log(columns);
this.isCard = !this.isCard; this.isCard = !this.isCard;
this.single = !this.single; this.single = !this.single;
}, },
singleChange(v) { singleChange(v, columns) {
console.log(v); console.log(v, columns);
event.stopPropagation();
}, },
}, },
}; };
...@@ -116,10 +262,13 @@ export default { ...@@ -116,10 +262,13 @@ export default {
border-bottom: 1px dashed #2680eb; border-bottom: 1px dashed #2680eb;
.checkSingle { .checkSingle {
margin-left: 16px; margin-left: 16px;
margin-right: 24px; // margin-right: 24px;
} }
.titleName { .titleName {
margin-right: 104px; width: 190px;
}
.topCount {
max-width: 205px;
} }
/* css3绘制三角形 */ /* css3绘制三角形 */
.triangle { .triangle {
...@@ -127,7 +276,7 @@ export default { ...@@ -127,7 +276,7 @@ export default {
height: 0px; height: 0px;
border-width: 20px; border-width: 20px;
border-style: solid; /*定义的是实现边框*/ border-style: solid; /*定义的是实现边框*/
border-color: transparent #2680eb #2680eb transparent;
border-radius: 4px; border-radius: 4px;
transform: rotate(-90deg); transform: rotate(-90deg);
right: 0; right: 0;
...@@ -140,17 +289,18 @@ export default { ...@@ -140,17 +289,18 @@ export default {
color: #ffffff; color: #ffffff;
} }
} }
.countCard { .countCard {
height: auto; height: auto;
.imgBox { .imgBox {
height: 178px; height: 178px;
width: 178px; // width: 178px;
margin: 20px 20px 23px 14px; max-width: 178px;
margin: 20px 0px 23px 14px;
border: 1px dashed #232323; border: 1px dashed #232323;
} }
.rightCount { .rightCount {
width: calc(100% - 192px); // width: calc(100% - 192px);
min-width: calc(100% - 212px);
.filed-col { .filed-col {
display: inline-flex; display: inline-flex;
margin-bottom: 6px; margin-bottom: 6px;
...@@ -158,6 +308,10 @@ export default { ...@@ -158,6 +308,10 @@ export default {
.filed-col > .value { .filed-col > .value {
text-indent: 2em !important; text-indent: 2em !important;
} }
.blueFont {
margin-left: 5px;
color: #2680eb;
}
} }
.bottomCard { .bottomCard {
padding-bottom: 20px; padding-bottom: 20px;
...@@ -194,9 +348,9 @@ export default { ...@@ -194,9 +348,9 @@ export default {
} }
.cardBox:hover { .cardBox:hover {
box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4); box-shadow: 0px 0px 10px rgba(38, 128, 235, 0.4);
.topCard{ .topCard {
background:rgba(38, 128, 235, 0.4); background: rgba(38, 128, 235, 0.4);
} }
} }
.borderCss { .borderCss {
border: 2px solid #2680eb; border: 2px solid #2680eb;
......
pages/produce/orderlist.vue
View file @ 4466c659
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
></Button> ></Button>
</template> </template>
<template slot="card" slot-scope="{ row }"> <template slot="card" slot-scope="{ row }">
<div <!-- <div
class="body" class="body"
@click=" @click="
toExecute( toExecute(
...@@ -94,14 +94,7 @@ ...@@ -94,14 +94,7 @@
height="100%" height="100%"
/> />
</div> </div>
<!-- <img
:src="getUrl(row.productUrl)"
width="120"
height="120"
:title="row.productUrl"
style="border:#cacbd0 dashed 1px"
onerror="this.src='/imgicon/noPic_product.png';"
/>-->
</Col> </Col>
<Col span="16" class="row"> <Col span="16" class="row">
<p>{{ l("beginTime") }}：{{ row.beginTime }}</p> <p>{{ l("beginTime") }}：{{ row.beginTime }}</p>
...@@ -167,7 +160,39 @@ ...@@ -167,7 +160,39 @@
</Col> </Col>
</Row> </Row>
</div> </div>
</div> </div> -->
<Vcard :multiple="multiple" :img="img" :leftBottom='leftBottom' >
<template slot="title">
{{ row.productName }}
</template>
<template slot="topCount">
{{ row.mesCode }}
</template>
<template slot="img">
<img :src="downUrl + row.productUrl" v-if="row.productUrl" />
</template>
<template slot="fileLine">
<Filed :span="24" name="开始时间：">
{{ row.beginTime }}
</Filed>
<Filed :span="24" name="计划结束时间：">
{{ row.endTime }}
</Filed>
<Filed :span="14" name="生产数量：">
{{ row.quantity }}
</Filed>
<Filed :span="8" name="工序号：">
{{ row.taskSeq }}
</Filed>
<Filed :span="24" name="工序名称：">
{{ row.taskName }}
</Filed>
</template>
<template slot="leftBottom">
图号:{{ row.drawnNumber }}
</template>
</Vcard>
</template> </template>
</DataGrid> </DataGrid>
</div> </div>
...@@ -183,6 +208,10 @@ export default { ...@@ -183,6 +208,10 @@ export default {
}, },
data() { data() {
return { return {
rightBottom:true,
leftBottom:true,
multiple: false,
img: true,
action: Api.index, action: Api.index,
easySearch: { easySearch: {
keys: { keys: {
......
plugins/iview.js
View file @ 4466c659
...@@ -78,7 +78,7 @@ import WordTree from '@/components/page/wordTree.vue' ...@@ -78,7 +78,7 @@ import WordTree from '@/components/page/wordTree.vue'
import Actions from '@/components/page/actions.vue' import Actions from '@/components/page/actions.vue'
import DateRange from '@/components/page/dateRange.vue' import DateRange from '@/components/page/dateRange.vue'
import FilesViewer from '@/components/page/filesViewer.vue' import FilesViewer from '@/components/page/filesViewer.vue'
import Vcard from '@/components/page/Vcard.vue'
// import FormMaking from 'form-making' // import FormMaking from 'form-making'
...@@ -144,7 +144,7 @@ Vue.component("DepartmentSelect", DepartmentSelect) ...@@ -144,7 +144,7 @@ Vue.component("DepartmentSelect", DepartmentSelect)
Vue.component("ProductNumberSelect", ProductNumberSelect) Vue.component("ProductNumberSelect", ProductNumberSelect)
Vue.component("ProductSelect", ProductSelect) Vue.component("ProductSelect", ProductSelect)
Vue.component("ProductSelect1", ProductSelect1) Vue.component("ProductSelect1", ProductSelect1)
Vue.component("ProjectTaskTree",ProjectTaskTree) Vue.component("ProjectTaskTree", ProjectTaskTree)
Vue.component("DTSpan", DTSpan) Vue.component("DTSpan", DTSpan)
Vue.component("DTSearch", DTSearch) Vue.component("DTSearch", DTSearch)
Vue.component("InputTime", InputTime) Vue.component("InputTime", InputTime)
...@@ -160,8 +160,8 @@ Vue.component("WordTree", WordTree) ...@@ -160,8 +160,8 @@ Vue.component("WordTree", WordTree)
Vue.component("Actions", Actions) Vue.component("Actions", Actions)
Vue.component("DateRange", DateRange) Vue.component("DateRange", DateRange)
Vue.component("Life", Life) Vue.component("Life", Life)
Vue.component("FilesViewer",FilesViewer) Vue.component("FilesViewer", FilesViewer)
Vue.component("Vcard", Vcard)
//注入mock //注入mock
// require("../mock") // require("../mock")
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment