姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

作者 姚富强
提交 c8a1193fe202ec9250f041cfa20fabb4916270ac 1 个父辈 8115edb4

老总

内嵌 并排对比
正在显示 2 个修改的文件 包含 29 行增加 和 106 行删除
@@ -38,7 +38,7 @@ const navigator = () => {} @@ -38,7 +38,7 @@ const navigator = () => {}
38 .left { 38 .left {
39 position: relative; 39 position: relative;
40 margin: 40px 40px 0; 40 margin: 40px 40px 0;
41 - width: 15%; 41 + width: 25%;
42 background-color: #6170c3; 42 background-color: #6170c3;
43 color: #fff; 43 color: #fff;
44 border-radius: 18px; 44 border-radius: 18px;
1 <script setup> 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> 2 +import { ref } from 'vue'
  3 +const classList = ref([
  4 + { url: '@/static/set.png', name: '形式与政策' },
  5 + { url: '@/static/class.jpg', name: '1+X中级认证' },
  6 + { url: '@/static/class.jpg', name: '交互动效设置' },
  7 + { url: '@/static/class.jpg', name: '融媒体制作与策划' },
  8 + { url: '@/static/class.jpg', name: '形式与政策' },
  9 + { url: '@/static/class.jpg', name: '1+X中级认证' },
  10 + { url: '@/static/class.jpg', name: '交互动效设置' },
  11 + { url: '@/static/class.jpg', name: '融媒体制作与策划' }
  12 +])
  13 +</script>
16 <template> 14 <template>
17 <div class="counter"> 15 <div class="counter">
18 <div class="hed"> 16 <div class="hed">
19 <div class="leftt">我的课程</div> 17 <div class="leftt">我的课程</div>
20 <div class="rightt"> 18 <div class="rightt">
21 <div class="noe"> 19 <div class="noe">
22 - <div class="pic">  
23 - <img src="@/static/set.png" alt="">设置  
24 - </div> 20 + <div class="pic"><img src="@/static/set.png" alt="" />设置</div>
25 </div> 21 </div>
26 <div class="noe"> 22 <div class="noe">
27 - <div class="pic">  
28 - <img src="@/static/ewm.png" alt="">二维码  
29 - </div> 23 + <div class="pic"><img src="@/static/ewm.png" alt="" />二维码</div>
30 </div> 24 </div>
31 <div class="noe"> 25 <div class="noe">
32 - <div class="pic">  
33 - <img src="@/static/fx.png" alt="">转发  
34 - </div> 26 + <div class="pic"><img src="@/static/fx.png" alt="" />转发</div>
35 </div> 27 </div>
36 </div> 28 </div>
37 </div> 29 </div>
38 <div class="bod"> 30 <div class="bod">
39 - <div class="n">  
40 - +新建课程  
41 - </div>  
42 - <div class="n">  
43 - 新建文件夹 31 + <div class="n">+新建课程</div>
  32 + <div class="n">新建文件夹</div>
44 </div> 33 </div>
45 - </div>  
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> -->  
52 <div class="ban"> 34 <div class="ban">
53 - <div class="item">  
54 - <div class="class">  
55 - <img src="@/static/class.jpg" alt="">  
56 - </div>  
57 - <div class="title">  
58 - 形式与政策  
59 - </div>  
60 - </div>  
61 - <div class="item">  
62 - <div class="class">  
63 - <img src="@/static/class.jpg" alt="">  
64 - </div>  
65 - <div class="title">  
66 - 1+X中级认证  
67 - </div>  
68 - </div>  
69 - <div class="item">  
70 - <div class="class">  
71 - <img src="@/static/class.jpg" alt="">  
72 - </div>  
73 - <div class="title">  
74 - 交互动效设计  
75 - </div>  
76 - </div>  
77 - <div class="item">  
78 - <div class="class">  
79 - <img src="@/static/class.jpg" alt="">  
80 - </div>  
81 - <div class="title">  
82 - 融媒体制作与策划  
83 - </div>  
84 - </div>  
85 - <div class="item">  
86 - <div class="class">  
87 - <img src="@/static/class.jpg" alt="">  
88 - </div>  
89 - <div class="title">  
90 - 形式与政策  
91 - </div>  
92 - </div>  
93 - <div class="item">  
94 - <div class="class">  
95 - <img src="@/static/class.jpg" alt="">  
96 - </div>  
97 - <div class="title">  
98 - 1+X中级认证  
99 - </div>  
100 - </div>  
101 - <div class="item">  
102 - <div class="class">  
103 - <img src="@/static/class.jpg" alt="">  
104 - </div>  
105 - <div class="title" s>  
106 - 交互动效设计  
107 - </div>  
108 - </div>  
109 - <div class="item"> 35 + <div class="item" v-for="item in classList" :key="item">
110 <div class="class"> 36 <div class="class">
111 - <img src="@/static/class.jpg" alt="">  
112 - </div>  
113 - <div class="title">  
114 - 融媒体制作与策划 37 + <img src="@/static/class.jpg" alt="" />
115 </div> 38 </div>
  39 + <div class="title">{{ item.name }}</div>
116 </div> 40 </div>
117 </div> 41 </div>
118 </div> 42 </div>
@@ -127,11 +51,12 @@ @@ -127,11 +51,12 @@
127 display: flex; 51 display: flex;
128 flex-wrap: wrap; 52 flex-wrap: wrap;
129 justify-content: space-around; 53 justify-content: space-around;
130 - margin-top: 30px;  
131 - .item{  
132 - margin: 50px; 54 + margin-top: 20px;
  55 + width: 95%;
  56 + .item {
  57 + margin: 40px;
133 } 58 }
134 - .title{ 59 + .title {
135 text-align: center; 60 text-align: center;
136 margin-top: 10px; 61 margin-top: 10px;
137 } 62 }
@@ -140,10 +65,8 @@ @@ -140,10 +65,8 @@
140 width: 100%; 65 width: 100%;
141 border-radius: 10px; 66 border-radius: 10px;
142 } 67 }
143 -  
144 } 68 }
145 69
146 -  
147 .bod { 70 .bod {
148 display: flex; 71 display: flex;
149 margin-top: 30px; 72 margin-top: 30px;
@@ -164,7 +87,7 @@ @@ -164,7 +87,7 @@
164 margin-top: 37px; 87 margin-top: 37px;
165 display: flex; 88 display: flex;
166 justify-content: space-between; 89 justify-content: space-between;
167 - width: 1277px; 90 + width: 95%;
168 91
169 .leftt { 92 .leftt {
170 font-weight: 800; 93 font-weight: 800;
@@ -183,8 +106,8 @@ @@ -183,8 +106,8 @@
183 width: 15px; 106 width: 15px;
184 height: 15px; 107 height: 15px;
185 } 108 }
186 -  
187 } 109 }
188 } 110 }
189 } 111 }
190 - }</style>  
  112 +}
  113 +</style>