hulei_ip
/
h5
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据大屏

This commit is contained in:
jxg 2024-09-22 23:49:09 +08:00
parent 9a9ec9464a
commit 21d3afdcc0
2 changed files with 108 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
package-lock.json generated
View File

@ -4224,27 +4224,6 @@
"whatwg-fetch": "^3.6.2"
},
"dependencies": {
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.11.1",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz",
"integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
}
}
},
"acorn": {
"version": "8.10.0",
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.10.0.tgz",
@ -4500,6 +4479,19 @@
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
},
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.11.1",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
"integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
}
},
"@vue/web-component-wrapper": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",

115
src/pages/largeDataScreen/largeDataScreen.vue
View File

@ -14,25 +14,34 @@
<view class="content">
<view class="left-content">
<view class="left">
<view class="statistical-data">
测量人数
</view>
<view class="statistical-data">
异常人数
</view>
<view class="statistical-data"> 测量人数 </view>
<view class="statistical-data"> 异常人数 </view>
</view>
<view class="right"></view>
</view>
<view class="right-content">
<view class="in_left">
</view>
<view class="in_left"> </view>
<view class="in_right"></view>
</view>
</view>
</view>
<view class="two-data-part">
<view class="content">
<view class="left">
<view class="left-one"> </view>
<view class="left-one"> </view>
<view class="left-one"> </view>
</view>
<view class="right">
<view class="right-one"></view>
<view class="right-one"></view>
<view class="right-one"></view>
</view>
</view>
</view>
<view class="three-data-part">
<view class="content">
<view class="left"></view>
<view class="right"></view>
@ -43,9 +52,7 @@
</template>
<script>
export default {
}
export default {};
</script>
<style lang="scss" scoped>
@ -56,7 +63,7 @@ export default {
// height: 100vh;
padding: 10px;
box-sizing: border-box;
background: #000E17;
background: #000e17;
.top-part {
height: 70px;
@ -97,7 +104,7 @@ export default {
.icon {
height: 30px;
width: 6px;
background: #7AFFFF;
background: #7affff;
}
.title-text {
@ -137,7 +144,13 @@ export default {
background: rgba(3, 220, 223, 0.02);
border-radius: 0px 0px 0px 0px;
border: 2px solid;
border-image: linear-gradient(180deg, rgba(3, 220, 223, 0.08), rgba(3, 220, 223, 0.4), rgba(3, 220, 223, 0.08)) 2 2;
border-image: linear-gradient(
180deg,
rgba(3, 220, 223, 0.08),
rgba(3, 220, 223, 0.4),
rgba(3, 220, 223, 0.08)
)
2 2;
}
}
@ -158,7 +171,7 @@ export default {
justify-content: space-between;
.in_left {
width: 33%;
width: 32%;
height: 100%;
background: rgba(3, 220, 223, 0.04);
box-shadow: inset 0px 0px 60px 0px rgba(3, 220, 223, 0.14);
@ -166,7 +179,7 @@ export default {
}
.in_right {
width: 65%;
width: 66%;
height: 100%;
background: rgba(3, 220, 223, 0.04);
box-shadow: inset 0px 0px 60px 0px rgba(3, 220, 223, 0.14);
@ -174,9 +187,71 @@ export default {
}
}
}
}
.two-data-part {
height: 719px;
width: 100%;
margin-top: 34px;
border: 1px solid red;
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.left {
width: 49%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.left-one {
width: 32%;
height: 85%;
border: 1px solid green;
}
}
.right {
width: 49%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.right-one {
width: 32%;
height: 85%;
border: 1px solid green;
}
}
}
}
.three-data-part{
margin-top: 34px;
height:749px;
width: 100%;
border:1px solid blue;
.content{
width:100%;
height:100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
.left{
width:49%;
height: 100%;
border: 1px solid red;
}
.right{
width:49%;
height: 100%;
border: 1px solid red;
}
}
}
}
}
</style>
</style>