初步完成自适应

2024-03-06 09:15:02 +08:00
parent 2539fbabd5
commit 0c5818fb27
15 changed files with 39511 additions and 6770 deletions
@@ -0,0 +1,109 @@
+<template>
+    <div class="box">
+        <div v-for="(it,ind) of data" :key="ind" class="item" :class="it.type==1?'typeOne':it.type==0?'typeTwo':'typeth'">
+            {{ it.name }}
+        </div>
+
+
+    </div>
+</template>
+  
+<script>
+export default {
+    name: 'yclView',
+    data() {
+        return {
+            data: [
+                { type: 1, name: '设备1' },
+                { type: 2, name: '设备2' },
+                { type: 0, name: '设备3' },
+                { type: 0, name: '设备3' },
+                { type: 0, name: '设备3' },
+                { type: 0, name: '设备3' },
+                { type: 1, name: '设备3' },
+                { type: 0, name: '设备3' },
+                { type: 1, name: '设备3' },
+                { type: 1, name: '设备3' },
+                { type: 0, name: '设备3' },
+                { type: 0, name: '设备3' },
+                { type: 1, name: '设备3' },
+                { type: 1, name: '设备3' },
+                { type: 0, name: '设备3' },
+                { type: 1, name: '设备3' },
+                { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+                // { type: 0, name: '设备3' },
+            ]
+
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+  
+<style lang="scss" scoped>
+.box {
+    width: 100%;
+    height: 860px;
+    display: flex;
+    padding: 50px;
+    // justify-content: space-evenly;
+    flex-wrap: wrap;
+
+    .item {
+        width: 200px;
+        height: 220px;
+        margin-right: 20px;
+        color: rgba(0, 0, 0, .5);
+        font-size: 20px;
+        text-align: center;
+        line-height: 220px;
+        // padding-top: 90px;
+    }
+    .typeOne{
+        background-color: #35ff39;
+    }
+    .typeTwo{
+        background-color: #849384;
+    }
+    .typeth{
+        background-color: #d2de25;
+    }
+}
+</style>