LED
This commit is contained in:
17792275749
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
@@ -1,20 +1,372 @@
|
||||
<template>
|
||||
<div class="rowDom-info">
|
||||
1
|
||||
<template v-if="deviceData">
|
||||
<div class="deviceData">
|
||||
<div class="detailHeader">
|
||||
<div>餐品热量</div>
|
||||
<div>268千卡/100克</div>
|
||||
</div>
|
||||
<div class="detailImg">
|
||||
<div>
|
||||
<img
|
||||
src="https://dev.yixiong-tech.com:8081/common/files/20260309/5b94f4df-d0e5-45ff-8a3d-8cd524441568.png"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="detailFooter">
|
||||
<div class="detailFooter-1">
|
||||
<div>红烧带鱼</div>
|
||||
<div>(<span>0.24</span>)</div>
|
||||
</div>
|
||||
<div class="detailFooter-2">
|
||||
<div>美容养颜</div>
|
||||
<div>增强免疫力</div>
|
||||
</div>
|
||||
<div class="detailFooter-3">
|
||||
<div>
|
||||
<div>12.5</div>
|
||||
<div>实名取用</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>13.8</div>
|
||||
<div>余量</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>6.6</div>
|
||||
<div>匿名取用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="deviceDataNull">
|
||||
<div class="detailImg">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="detailFooter">
|
||||
<div class="detailFooter-1">
|
||||
<div>暂无餐品</div>
|
||||
</div>
|
||||
<div class="detailFooter-2"></div>
|
||||
<div class="detailFooter-3">
|
||||
<div>
|
||||
<div>-</div>
|
||||
<div>实名取用</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>-</div>
|
||||
<div>余量</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>-</div>
|
||||
<div>匿名取用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countTo from "vue-count-to";
|
||||
|
||||
export default {
|
||||
name: "info",
|
||||
data() {
|
||||
return {
|
||||
|
||||
props: {
|
||||
deviceData: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.rowDom-info {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
margin: 0 20px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.deviceData {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.detailHeader {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 170px;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
padding-top: 6px;
|
||||
box-sizing: border-box;
|
||||
background-image: url("@/assets/images/led/header.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.detailImg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: relative;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 240px;
|
||||
height: 160px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
padding-top: 14px;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #FFFFFF;
|
||||
background: rgba(238, 246, 253, 0.72);
|
||||
|
||||
.detailFooter-1 {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: end;
|
||||
margin-bottom: 14px;
|
||||
justify-content: center;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #000000;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
|
||||
> span {
|
||||
color: #F24439;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter-2 {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 14px;
|
||||
|
||||
> div {
|
||||
margin: 0 8px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
color: #2AC79F;
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #2AC79F;
|
||||
background-color: #E5FFF8;
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #161616;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #77849E;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deviceDataNull {
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.detailImg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: relative;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/images/led/null.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 240px;
|
||||
height: 160px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
padding-top: 14px;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #FFFFFF;
|
||||
background: rgba(238, 246, 253, 0.72);
|
||||
|
||||
.detailFooter-1 {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: end;
|
||||
margin-bottom: 14px;
|
||||
justify-content: center;
|
||||
|
||||
> div {
|
||||
color: #000000;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter-2 {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.detailFooter-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #161616;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #77849E;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,30 @@
|
||||
<template>
|
||||
<div class="rowDom"></div>
|
||||
<div class="rowDom">
|
||||
<div class="rowDom-logo">
|
||||
<div></div>
|
||||
<div>数味智餐</div>
|
||||
</div>
|
||||
<div class="rowDom-dishes">
|
||||
<template v-for="item in deviceDataList">
|
||||
<Info :deviceData="item.data" :key="item.id" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Info from "./info.vue";
|
||||
export default {
|
||||
name: "rowDom",
|
||||
props: {
|
||||
deviceDataList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Info
|
||||
},
|
||||
data() {
|
||||
return{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -23,20 +35,40 @@ export default {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
background-image: url("@/assets/images/led/bg1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
background-size: cover;
|
||||
align-items: center;
|
||||
|
||||
//.rowDom-logo {
|
||||
// width: 100px;
|
||||
// height: 100%;
|
||||
//}
|
||||
//
|
||||
//.rowDom-dishes {
|
||||
// width: 0;
|
||||
// flex: 1;
|
||||
// height: 100%;
|
||||
//}
|
||||
.rowDom-logo {
|
||||
width: 310px;
|
||||
//margin-right: 20px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: 0 auto 30px;
|
||||
background-image: url("@/assets/images/led/logo.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
//font-family: HarmonyOS Sans SC;
|
||||
}
|
||||
}
|
||||
|
||||
.rowDom-dishes {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+78
-4
@@ -2,17 +2,17 @@
|
||||
<div id="led">
|
||||
<div class="ledDom">
|
||||
<div class="ledDom1" :style="{'left': -(screenWidth * 0) + 'px'}">
|
||||
<RowDom />
|
||||
<RowDom :deviceDataList="deviceDataList"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ledDom">
|
||||
<div class="ledDom2" :style="{'left': -(screenWidth * 1) + 'px'}">
|
||||
<RowDom />
|
||||
<RowDom :deviceDataList="deviceDataList"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ledDom">
|
||||
<div class="ledDom3" :style="{'left': -(screenWidth * 2) + 'px'}">
|
||||
<RowDom />
|
||||
<RowDom :deviceDataList="deviceDataList"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -20,6 +20,8 @@
|
||||
|
||||
<script>
|
||||
import RowDom from "./components/rowDom.vue";
|
||||
// import {httpRequest} from "@/XMLHttpRequest";
|
||||
|
||||
export default {
|
||||
name: "led",
|
||||
components: {
|
||||
@@ -27,7 +29,70 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
screenWidth: 1920
|
||||
screenWidth: 1920,
|
||||
|
||||
deviceDataList: [{
|
||||
id: '1',
|
||||
data: 1
|
||||
}, {
|
||||
id: '2',
|
||||
data: null
|
||||
}, {
|
||||
id: '3',
|
||||
data: 2
|
||||
}, {
|
||||
id: '4',
|
||||
data: null
|
||||
}, {
|
||||
id: '5',
|
||||
data: 3
|
||||
}, {
|
||||
id: '6',
|
||||
data: null
|
||||
}, {
|
||||
id: '7',
|
||||
data: null
|
||||
}, {
|
||||
id: '8',
|
||||
data: null
|
||||
}, {
|
||||
id: '9',
|
||||
data: null
|
||||
}, {
|
||||
id: '10',
|
||||
data: null
|
||||
}, {
|
||||
id: '11',
|
||||
data: null
|
||||
}, {
|
||||
id: '12',
|
||||
data: null
|
||||
}, {
|
||||
id: '13',
|
||||
data: null
|
||||
}, {
|
||||
id: '14',
|
||||
data: null
|
||||
}, {
|
||||
id: '15',
|
||||
data: null
|
||||
}],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDeviceId();
|
||||
},
|
||||
methods: {
|
||||
getDeviceId() {
|
||||
// httpRequest().then(function (res) {
|
||||
//
|
||||
// }).catch(function(err) {
|
||||
//
|
||||
// })
|
||||
},
|
||||
|
||||
getDeviceData() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -36,6 +101,15 @@ export default {
|
||||
<style scoped lang="less">
|
||||
#led {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000000;
|
||||
|
||||
//.row_1,
|
||||
//.row_2,
|
||||
//.row_3 {
|
||||
// width: 100%;
|
||||
// height: 312px;
|
||||
//}
|
||||
|
||||
.ledDom {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user