姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

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

class

内嵌 并排对比
正在显示 1 个修改的文件 包含 73 行增加 和 68 行删除
  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,73 +122,69 @@ @@ -113,73 +122,69 @@
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；  
128 - }  
129 -  
130 - img { 131 + .item{
  132 + margin: 50px;
  133 + }
  134 + .title{
  135 + text-align: center;
  136 + margin-top: 10px;
  137 + }
  138 + img {
131 height: 125px; 139 height: 125px;
132 width: 100%; 140 width: 100%;
133 border-radius: 10px; 141 border-radius: 10px;
134 } 142 }
135 - 143 +
136 } 144 }
137 145
138 - }  
139 -  
140 - .bod {  
141 - display: flex;  
142 - margin-top: 30px;  
143 146
144 - .n {  
145 - font-size: 8px;  
146 - border-radius: 15px;  
147 - padding: 3px 10px;  
148 - height: 20px;  
149 - line-height: 20px;  
150 - background-color: white;  
151 - border: #189eff 1px solid;  
152 - margin-right: 25px; 147 + .bod {
  148 + display: flex;
  149 + margin-top: 30px;
  150 +
  151 + .n {
  152 + font-size: 8px;
  153 + border-radius: 15px;
  154 + padding: 3px 10px;
  155 + height: 20px;
  156 + line-height: 20px;
  157 + background-color: white;
  158 + border: #189eff 1px solid;
  159 + margin-right: 25px;
  160 + }
153 } 161 }
154 - }  
155 162
156 - .hed {  
157 - margin-top: 37px;  
158 - display: flex;  
159 - justify-content: space-between;  
160 - align-items: center; 163 + .hed {
  164 + margin-top: 37px;
  165 + display: flex;
  166 + justify-content: space-between;
  167 + width: 1277px;
161 168
162 - width: 900px; 169 + .leftt {
  170 + font-weight: 800;
  171 + }
163 172
164 - .leftt {  
165 - font-weight: 800;  
166 - } 173 + .rightt {
  174 + display: flex;
167 175
168 - .rightt {  
169 - display: flex; 176 + .noe {
  177 + width: 70px;
  178 + display: flex;
  179 + justify-content: space-around;
  180 + align-items: center;
170 181
171 - .noe {  
172 - width: 70px;  
173 - display: flex;  
174 - justify-content: space-between;  
175 - align-items: center; 182 + img {
  183 + width: 15px;
  184 + height: 15px;
  185 + }
176 186
177 - img {  
178 - width: 15px;  
179 - height: 15px;  
180 } 187 }
181 -  
182 } 188 }
183 } 189 }
184 - }  
185 -}</style>  
  190 + }</style>