首页调整

ruoyi-ui/src/assets/fonts/font.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'DongFangDaKai';
+  src: url(AlimamaDongFangDaKai-Regular.ttf);
+  font-weight: normal;
+  font-style: normal
+}

ruoyi-ui/src/main.js

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
 
 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
+import "@/assets/fonts/font.css";
 import locale from "element-plus/es/locale/lang/zh-cn";
 
 import "@/assets/styles/index.scss"; // global css

ruoyi-ui/src/router/index.js

@@ -65,7 +65,7 @@ export const constantRoutes = [
     {
         path: '',
         component: Layout,
-        redirect: '/datamonitor/monitorservice',
+        redirect: '/shouye',
         // children: [
         //     {
         //         path: '/index',

ruoyi-ui/src/views/shouye.vue

@@ -1,104 +1,129 @@
 <template>
-    <div style="height: 100vh;background-color: #dcecef;">
-        <img style="position: absolute;left: 2%;top: 3%;width: 58%;z-index: 100;height: 6%;"  src="@/assets/上海水务首页图片包/项目标题.png" alt="">
-    <el-carousel 
-    :interval="4000" 
-    height="auto"
-    arrow="always"
-    autoplay
+  <div style="height: 100vh;background-color: #dcecef;">
+    <div style="position: absolute;left: 2%;top: 2%;width: 58%;z-index: 100;height: 6%;">
+      <span style="font-size: 3rem;color: #fff;font-family: DongFangDaKai">上海市水务海洋数字孪生模型服务管理系统</span>
+    </div>
+    <!--        <img  src="@/assets/上海水务首页图片包/项目标题.png" alt="">-->
+    <el-carousel
+        :interval="4000"
+        height="auto"
+        arrow="always"
+        autoplay
     >
-        <el-carousel-item style="height: 80vh">
-            <img style="height: 100%;width: 100%;"  src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
-        </el-carousel-item>
-        <el-carousel-item style="height: 80vh">
-            <img style="height: 100%;width: 100%;"  src="@/assets/上海水务首页图片包/风暴潮模型.png" alt="">
-        </el-carousel-item>
-        <el-carousel-item style="height: 80vh">
-            <img style="height: 100%;width: 100%;"  src="@/assets/上海水务首页图片包/黄浦江水系水文分析预报数值模拟模型.png" alt="">
-        </el-carousel-item>
-        <el-carousel-item style="height: 80vh">
-            <img style="height: 100%;width: 100%;"  src="@/assets/上海水务首页图片包/内涝.jpg" alt="">
-        </el-carousel-item>
-        <el-carousel-item style="height: 80vh">
-            <img style="height: 100%;width: 100%;"  src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
-        </el-carousel-item>
-        <el-carousel-item style="height: 80vh">
-            <img style="height: 100%;width: 100%;"  src="@/assets/上海水务首页图片包/苏州河水系水情预报模型.png" alt="">
-        </el-carousel-item>
-        <el-carousel-item style="height: 80vh">
-            <img style="height: 100%;width: 100%;"  src="@/assets/上海水务首页图片包/上海市中心城区排水系统模型.png" alt="">
-        </el-carousel-item>
-        <el-carousel-item style="height: 80vh">
-            <img style="height: 100%;width: 100%;"  src="@/assets/上海水务首页图片包/温带风暴潮预报模型.png" alt="">
-        </el-carousel-item>
+      <el-carousel-item style="height: 80vh">
+        <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
+      </el-carousel-item>
+      <el-carousel-item style="height: 80vh">
+        <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/风暴潮模型.png" alt="">
+      </el-carousel-item>
+      <el-carousel-item style="height: 80vh">
+        <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/黄浦江水系水文分析预报数值模拟模型.png"
+             alt="">
+      </el-carousel-item>
+      <el-carousel-item style="height: 80vh">
+        <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/内涝.jpg" alt="">
+      </el-carousel-item>
+      <el-carousel-item style="height: 80vh">
+        <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
+      </el-carousel-item>
+      <el-carousel-item style="height: 80vh">
+        <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/苏州河水系水情预报模型.png" alt="">
+      </el-carousel-item>
+      <el-carousel-item style="height: 80vh">
+        <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海市中心城区排水系统模型.png" alt="">
+      </el-carousel-item>
+      <el-carousel-item style="height: 80vh">
+        <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/温带风暴潮预报模型.png" alt="">
+      </el-carousel-item>
     </el-carousel>
+  </div>
+  <div style="position: absolute;height: 30vh;z-index: 100;top: 70%;width: 100%;">
+    <div style="display: flex;width: 98%;margin-left: 1%;">
+      <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1"
+           @click="pushto('platform/componentReg')">
+        <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型注册管理</div>
+        <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
+             src="@/assets/上海水务首页图片包/模型注册.png" alt="">
+      </div>
+      <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back2"
+           @click="pushto('register/edtiModel')">
+        <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型服务管理</div>
+        <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
+             src="@/assets/上海水务首页图片包/模型服务管理.png" alt="">
+      </div>
+      <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1"
+           @click="pushto('standardization/modelUsing')">
+        <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型标准化开发</div>
+        <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
+             src="@/assets/上海水务首页图片包/模型标准化.png" alt="">
+      </div>
+      <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back2"
+           @click="pushto('datamonitor/model_operation_monitoring')">
+        <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型监控管理</div>
+        <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
+             src="@/assets/上海水务首页图片包/模型监控.png" alt="">
+      </div>
+      <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1"
+           @click="pushto('evaluate/score')">
+        <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型评价管理</div>
+        <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
+             src="@/assets/上海水务首页图片包/模型评价.png" alt="">
+      </div>
+
     </div>
-    <div style="position: absolute;height: 30vh;z-index: 100;top: 70%;width: 100%;">
-        <div style="display: flex;width: 98%;margin-left: 1%;"> 
-            <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1" @click="pushto('platform/componentReg')">
-                <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型注册管理</div>
-                <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"  src="@/assets/上海水务首页图片包/模型注册.png" alt="">
-            </div>
-            <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back2" @click="pushto('register/edtiModel')">
-                <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型服务管理</div>
-                <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"  src="@/assets/上海水务首页图片包/模型服务管理.png" alt="">
-            </div>
-            <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1" @click="pushto('standardization/modelUsing')">
-                <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型标准化开发</div>
-                <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"  src="@/assets/上海水务首页图片包/模型标准化.png" alt="">
-            </div>
-            <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back2" @click="pushto('datamonitor/model_operation_monitoring')">
-                <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型监控管理</div>
-                <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"  src="@/assets/上海水务首页图片包/模型监控.png" alt="">
-            </div>
-            <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1" @click="pushto('evaluate/score')">
-                <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型评价管理</div>
-                <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"  src="@/assets/上海水务首页图片包/模型评价.png" alt="">
-            </div>
-            
-        </div>
-    </div>
+  </div>
 </template>
 <script setup>
-import { useRouter } from 'vue-router'
+import {useRouter} from 'vue-router'
 
 const router = useRouter()
 const carouseData = [
-  { 
-    id: 1, 
-    url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href 
+  {
+    id: 1,
+    url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href
   },
-  { 
-    id: 2, 
-    url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href 
+  {
+    id: 2,
+    url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href
   },
-  { 
-    id: 3, 
-    url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href 
+  {
+    id: 3,
+    url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href
   },
 ]
-function pushto(routers){
-    router.push(routers);
+
+function pushto(routers) {
+  router.push(routers);
 }
 
 </script>
+<!--
+  //background-image:url('@/assets/上海水务首页图片包/浅蓝.png');
+  //background-repeat: no-repeat;
+  //background-position: center center;
+ -->
 <style scoped>
-.back1{
-    background-image:url('@/assets/上海水务首页图片包/浅蓝.png');
-    background-repeat: no-repeat;
-    background-position: center center;
+
+.back1 {
+  background: linear-gradient(45deg, rgba(142, 197, 252, 1.000) 0.000%, rgba(141, 211, 255, 1.000) 25.000%, rgba(161, 216, 255, 1.000) 50.000%, rgba(193, 210, 255, 1.000) 75.000%, rgba(224, 195, 255, 1.000) 100.000%);
+  border-radius: 8px;
+  box-shadow: 0 16px 48px 16px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .12), 0 8px 16px -8px rgba(0, 0, 0, .16);
+  transition: transform .2s ease-in;
 }
+
 .back1:hover {
   transform: translateY(-20px);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }
-.back2{
-    background-image:url('@/assets/上海水务首页图片包/深蓝.png');
-    background-repeat: no-repeat;
-    background-position: center center;
+
+.back2 {
+  background-image: url('@/assets/上海水务首页图片包/深蓝.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+  transition: transform .2s ease-in;
 }
+
 .back2:hover {
   transform: translateY(-20px);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 6px rgba(0, 0, 0, .12);
 }
 </style>