姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

作者 XJF
提交 767763669d83bcf98af5d4f99b4832940e58df08 1 个父辈 9513169c

class

内嵌 并排对比
正在显示 1 个修改的文件 包含 39 行增加 和 34 行删除
  1 +<script setup>
  2 +// import { ref } from 'vue'
  3 +// import Head from '@/components/head.vue'
  4 +// const classList = ref([
  5 +//   {url: '@/static/set.png', name: '形式与政策'},
  6 +//   {url: '@/static/class.jpg', name: '1+X中级认证'},
  7 +// {url: '@/static/class.jpg', name: '交互动效设置'},
  8 +//   {url: '@/static/class.jpg', name: '融媒体制作与策划'},
  9 +// {url: '@/static/class.jpg', name: '形式与政策'},
  10 +//   {url: '@/static/class.jpg', name: '1+X中级认证'},
  11 +// {url: '@/static/class.jpg', name: '交互动效设置'},
  12 +//   {url: '@/static/class.jpg', name: '融媒体制作与策划'},
  13 +
  14 +// ])
  15 +// </script>
1 <template> 16 <template>
2 <div class="counter"> 17 <div class="counter">
3 <div class="hed"> 18 <div class="hed">
@@ -28,14 +43,18 @@ @@ -28,14 +43,18 @@
28 新建文件夹 43 新建文件夹
29 </div> 44 </div>
30 </div> 45 </div>
31 - 46 + <!-- <div class="ban">
  47 + <div class="bottom">
  48 + <div class="pic" v-for="item in classList" :key="item"><img :src="item.url" alt=""></div>
  49 + <div class="li" v-for="item in classList" :key="item">{{ item.name}}</div>
  50 + </div>
  51 + </div> -->
32 <div class="ban"> 52 <div class="ban">
33 <div class="item"> 53 <div class="item">
34 <div class="class"> 54 <div class="class">
35 <img src="@/static/class.jpg" alt=""> 55 <img src="@/static/class.jpg" alt="">
36 </div> 56 </div>
37 - <div class="title" style=" text-align: center;  
38 - padding: 8px 0;"> 57 + <div class="title">
39 形式与政策 58 形式与政策
40 </div> 59 </div>
41 </div> 60 </div>
@@ -43,8 +62,7 @@ @@ -43,8 +62,7 @@
43 <div class="class"> 62 <div class="class">
44 <img src="@/static/class.jpg" alt=""> 63 <img src="@/static/class.jpg" alt="">
45 </div> 64 </div>
46 - <div class="title" style=" text-align: center;  
47 - padding: 8px 0;"> 65 + <div class="title">
48 1+X中级认证 66 1+X中级认证
49 </div> 67 </div>
50 </div> 68 </div>
@@ -52,8 +70,7 @@ @@ -52,8 +70,7 @@
52 <div class="class"> 70 <div class="class">
53 <img src="@/static/class.jpg" alt=""> 71 <img src="@/static/class.jpg" alt="">
54 </div> 72 </div>
55 - <div class="title" style=" text-align: center;  
56 - padding: 8px 0;"> 73 + <div class="title">
57 交互动效设计 74 交互动效设计
58 </div> 75 </div>
59 </div> 76 </div>
@@ -61,20 +78,15 @@ @@ -61,20 +78,15 @@
61 <div class="class"> 78 <div class="class">
62 <img src="@/static/class.jpg" alt=""> 79 <img src="@/static/class.jpg" alt="">
63 </div> 80 </div>
64 - <div class="title" style=" text-align: center;  
65 - padding: 8px 0;"> 81 + <div class="title">
66 融媒体制作与策划 82 融媒体制作与策划
67 </div> 83 </div>
68 </div> 84 </div>
69 - </div>  
70 -  
71 - <div class="ban">  
72 <div class="item"> 85 <div class="item">
73 <div class="class"> 86 <div class="class">
74 <img src="@/static/class.jpg" alt=""> 87 <img src="@/static/class.jpg" alt="">
75 </div> 88 </div>
76 - <div class="title" style=" text-align: center;  
77 - padding: 8px 0;"> 89 + <div class="title">
78 形式与政策 90 形式与政策
79 </div> 91 </div>
80 </div> 92 </div>
@@ -82,8 +94,7 @@ @@ -82,8 +94,7 @@
82 <div class="class"> 94 <div class="class">
83 <img src="@/static/class.jpg" alt=""> 95 <img src="@/static/class.jpg" alt="">
84 </div> 96 </div>
85 - <div class="title" style=" text-align: center;  
86 - padding: 8px 0;"> 97 + <div class="title">
87 1+X中级认证 98 1+X中级认证
88 </div> 99 </div>
89 </div> 100 </div>
@@ -91,8 +102,7 @@ @@ -91,8 +102,7 @@
91 <div class="class"> 102 <div class="class">
92 <img src="@/static/class.jpg" alt=""> 103 <img src="@/static/class.jpg" alt="">
93 </div> 104 </div>
94 - <div class="title" style=" text-align: center;  
95 - padding: 8px 0;"> 105 + <div class="title" s>
96 交互动效设计 106 交互动效设计
97 </div> 107 </div>
98 </div> 108 </div>
@@ -100,8 +110,7 @@ @@ -100,8 +110,7 @@
100 <div class="class"> 110 <div class="class">
101 <img src="@/static/class.jpg" alt=""> 111 <img src="@/static/class.jpg" alt="">
102 </div> 112 </div>
103 - <div class="title" style=" text-align: center;  
104 - padding: 8px 0;"> 113 + <div class="title">
105 融媒体制作与策划 114 融媒体制作与策划
106 </div> 115 </div>
107 </div> 116 </div>
@@ -113,20 +122,19 @@ @@ -113,20 +122,19 @@
113 .counter { 122 .counter {
114 width: 100%; 123 width: 100%;
115 background-color: #f2f2f2; 124 background-color: #f2f2f2;
116 - margin-left: 20px;  
117 125
118 .ban { 126 .ban {
119 display: flex; 127 display: flex;
  128 + flex-wrap: wrap;
120 justify-content: space-around; 129 justify-content: space-around;
121 margin-top: 30px; 130 margin-top: 30px;
122 -  
123 - .item {  
124 - width: 200px;  
125 - margin-top: 25px;  
126 - .title {  
127 - text-align: center； 131 + .item{
  132 + margin: 50px;
  133 + }
  134 + .title{
  135 + text-align: center;
  136 + margin-top: 10px;
128 } 137 }
129 -  
130 img { 138 img {
131 height: 125px; 139 height: 125px;
132 width: 100%; 140 width: 100%;
@@ -135,7 +143,6 @@ @@ -135,7 +143,6 @@
135 143
136 } 144 }
137 145
138 - }  
139 146
140 .bod { 147 .bod {
141 display: flex; 148 display: flex;
@@ -157,9 +164,7 @@ @@ -157,9 +164,7 @@
157 margin-top: 37px; 164 margin-top: 37px;
158 display: flex; 165 display: flex;
159 justify-content: space-between; 166 justify-content: space-between;
160 - align-items: center;  
161 -  
162 - width: 900px; 167 + width: 1277px;
163 168
164 .leftt { 169 .leftt {
165 font-weight: 800; 170 font-weight: 800;
@@ -171,7 +176,7 @@ @@ -171,7 +176,7 @@
171 .noe { 176 .noe {
172 width: 70px; 177 width: 70px;
173 display: flex; 178 display: flex;
174 - justify-content: space-between; 179 + justify-content: space-around;
175 align-items: center; 180 align-items: center;
176 181
177 img { 182 img {
@@ -182,4 +187,4 @@ @@ -182,4 +187,4 @@
182 } 187 }
183 } 188 }
184 } 189 }
185 -}</style>  
  190 + }</style>