院校详情--风采

src/assets/icons/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3452620 */
-  src: url('//at.alicdn.com/t/font_3452620_yiexawmknvl.woff2?t=1654503062919') format('woff2'),
-  url('//at.alicdn.com/t/font_3452620_yiexawmknvl.woff?t=1654503062919') format('woff'),
-  url('//at.alicdn.com/t/font_3452620_yiexawmknvl.ttf?t=1654503062919') format('truetype');
+  src: url('//at.alicdn.com/t/font_3452620_hlad1kb9yl.woff2?t=1654504100564') format('woff2'),
+  url('//at.alicdn.com/t/font_3452620_hlad1kb9yl.woff?t=1654504100564') format('woff'),
+  url('//at.alicdn.com/t/font_3452620_hlad1kb9yl.ttf?t=1654504100564') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bofang:before {
+  content: "\e667";
+}
+
 .icon-vr:before {
   content: "\e70a";
 }

src/main.js

@@ -13,7 +13,7 @@ import router from './router'
 import permission from './directive/permission'
 
 import './assets/icons' // icon
-import '@/assets/icons/iconfont.css' // ruoyi css
+import '@/assets/icons/iconfont.css' // 阿里巴巴icon css
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";

src/views/career/plan/compoents/UniversityStyle.vue

@@ -1,7 +1,36 @@
 <template>
   <div>
-    <p>1111111</p>
-    <div class="iconfont icon-vr"></div>
+    <!-- VR -->
+    <div class="image-item">
+      <div class="cover-image vr" >
+          <div class="colleges-imgs-mask">
+            <i class="iconfont icon-vr" style="font-size: 28px"></i>
+          </div>
+      </div>
+      <p class="mt15 text-overflow-ellipsis f14 lh20">VR校园</p>
+    </div>
+    <!-- 视频 -->
+    <div class="image-item">
+      <div class="cover-image video" >
+        <div class="colleges-imgs-mask">
+          <i class="iconfont icon-bofang" style="font-size: 28px"></i>
+        </div>
+      </div>
+      <p class="mt15 text-overflow-ellipsis f14 lh20">清华大学</p>
+    </div>
+<!--     图片列表-->
+    <div class="image-item">
+        <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00066675.jpeg" :preview-src-list="srcList"></el-image>
+      <p class="mt15 text-overflow-ellipsis f14 lh20">校门</p>
+    </div>
+    <div class="image-item">
+      <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00065517.jpeg" :preview-src-list="srcList"></el-image>
+      <p class="mt15 text-overflow-ellipsis f14 lh20">中央主楼</p>
+    </div>
+    <div class="image-item">
+      <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00065520.jpeg" :preview-src-list="srcList"></el-image>
+      <p class="mt15 text-overflow-ellipsis f14 lh20">伟伦楼</p>
+    </div>
   </div>
 </template>
 
@@ -10,12 +39,58 @@
 export default {
   data() {
     return {
-
+      srcList: [
+        'https://img1.youzy.cn/content/media/thumbs/p00066675.jpeg',
+        'https://img1.youzy.cn/content/media/thumbs/p00065517.jpeg',
+        'https://img1.youzy.cn/content/media/thumbs/p00065520.jpeg'
+      ]
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.image-item:nth-of-type(5n) {
+  margin-right: 0;
+}
+.image-item{
+  width: 217px;
+  cursor: pointer;
+  margin-right: 30px;
+  margin-top: 20px;
+  float: left;
+  color: #333;
+  .cover-image {
+    width: 217px;
+    height: 120px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: 50%;
+    border-radius: 4px;
+    position: relative;
+    cursor: pointer;
+  }
+  .vr{
+    background-image: url("http://toc.cn-bj.ufileos.com/media/files/20210414/9d02bb82.png");
+  }
+  .video {
+    background-image: url("http://img1.youzy.cn/content/media/thumbs/p00176063.jpeg");
+  }
+  .colleges-imgs-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 217px;
+    height: 120px;
+    background: rgba(0,0,0,.5);
+    color: #fff;
+    text-align: center;
+    line-height: 120px;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  &:hover{
+      color: #42b983;
+  }
+}
 </style>