diff --git a/src/assets/images/bj.png b/src/assets/images/bj.png
new file mode 100644
index 0000000..47eaf16
Binary files /dev/null and b/src/assets/images/bj.png differ
diff --git a/src/assets/images/bj1.png b/src/assets/images/bj1.png
new file mode 100644
index 0000000..e091f38
Binary files /dev/null and b/src/assets/images/bj1.png differ
diff --git a/src/assets/images/bj2.png b/src/assets/images/bj2.png
new file mode 100644
index 0000000..29fcaf7
Binary files /dev/null and b/src/assets/images/bj2.png differ
diff --git a/src/assets/images/kc1.png b/src/assets/images/kc1.png
new file mode 100644
index 0000000..4af27ec
Binary files /dev/null and b/src/assets/images/kc1.png differ
diff --git a/src/assets/images/kc2.png b/src/assets/images/kc2.png
new file mode 100644
index 0000000..ac1b80e
Binary files /dev/null and b/src/assets/images/kc2.png differ
diff --git a/src/assets/images/kc3.png b/src/assets/images/kc3.png
new file mode 100644
index 0000000..873ed98
Binary files /dev/null and b/src/assets/images/kc3.png differ
diff --git a/src/assets/images/top.png b/src/assets/images/top.png
new file mode 100644
index 0000000..a1a0cb1
Binary files /dev/null and b/src/assets/images/top.png differ
diff --git a/src/assets/images/tp.png b/src/assets/images/tp.png
new file mode 100644
index 0000000..4965185
Binary files /dev/null and b/src/assets/images/tp.png differ
diff --git a/src/assets/images/tp1.jpg b/src/assets/images/tp1.jpg
new file mode 100644
index 0000000..cfba540
Binary files /dev/null and b/src/assets/images/tp1.jpg differ
diff --git a/src/views/portal/courseHomepage.vue b/src/views/portal/courseHomepage.vue
index a8b4926..d493746 100644
--- a/src/views/portal/courseHomepage.vue
+++ b/src/views/portal/courseHomepage.vue
@@ -64,13 +64,14 @@
     </div>
 
     <div class="sidebar">
-      <div class="content">
+      <div class="icon"><img src="/src/assets/images/rjgz.jpg" width="100%" height="100%"></div>
+      <!-- <div class="content">
         <h3>课程目标</h3>
         <div class="btn">了解更多</div>
         <a>
           课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程课程
         </a>
-      </div>
+      </div> -->
 
       <div class="column" style="">
         <div class="icon"></div>
@@ -386,6 +387,19 @@ body {
   margin-left: 20px;
   // background-color: rgb(84, 50, 9)
 }
+.sidebar .icon{
+  width: 100%;
+  height: 20%;
+}
+.sidebar .content {
+  width: 100%;
+  height: 20%;
+  border-radius: 14px 14px 14px 14px;
+  border-left: 4px solid #5577ff;
+  background-color: #ffffff;
+  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
 .sidebar .content {
   width: 100%;
   height: 20%;
diff --git a/src/views/portal/index.vue b/src/views/portal/index.vue
index 5c81b7f..7d2efe6 100644
--- a/src/views/portal/index.vue
+++ b/src/views/portal/index.vue
@@ -1,365 +1,171 @@
 <template>
-  <div>
-    <!-- <div class="logo"><img src="/src/assets/images/图灵云logo.png"></div>  -->
+  <!-- <div>网站首页面</div> -->
+  <div class="header">
+    <div class="logo"></div>
     <div class="nav">
-      <ul>
-        <li><a href="1.html" target="_self">xxx</a></li>
-        <li><a href="2.html" target="_search">xxxx</a></li>
-        <li><a href="3.html" target="_self">xxxx</a></li>
-        <li><a href="4.html" target="_search">xxxx</a></li>
-        <li><a href="5.html" target="_self">xxxx</a></li>
-        <li><a href="6.html" target="_self">xxxx</a></li>
-        <li><a href="6.html" target="_self">注册 | 登入</a></li>
-      </ul>
-      <!-- <div class="login">
-				<a href="" target="_self" style="color: #FFFFFF;">注册 | </a> <a href="" target="_self"style="color: #FFFFFF;">登入</a>
-			</div> -->
+    <div class="nav1">
+       <ul>
+					<li>企业入口&nbsp;&nbsp;|</li>
+					<li>教师入口&nbsp;&nbsp;|</li>
+					<li>学生入口&nbsp;&nbsp;|</li>
+					<li>毕业生入口</li>
+				</ul>
+
     </div>
-    <div class="lbt">
-      <!-- <div id="app">
-			<template>
-			  <el-carousel :interval="5000" arrow="always">
-			    <el-carousel-item v-for="item in 2" :key="item">
-			      <h3>{{ item }}</h3>
-			    </el-carousel-item>
-			  </el-carousel>
-			</template>
-</div> -->
-      <img src="/src/assets/images/1.png" />
-      <!-- <img src="img/0.jpg" id='img0'/> -->
+    <div class="nav2">
+      <ul>
+						<li><a>学生首页</a></li>
+						<li><a>专业概况</a></li>
+						<li><a>教学改革</a></li>
+						<li><a>科学研就</a></li>
+						<li><a>人才培养</a></li>
+						<li><a>成果展示</a></li>
+						<li><a>产教结合</a></li>
+						<li><a>日常教学</a></li>
+						<li><a>优秀学生</a></li>
+					</ul> 
     </div>
-    <div class="content">
-      <div class="content1">
-        <h2>
-          <span>课程</span>
-          列表
-          <br />
-          <em>CURRICULUMSTABLE</em>
-        </h2>
+  </div>
+    <!-- <div class="inco"></div> -->
+    <h1>知识图谱</h1>
+    <!-- <p>(专业代码 ：080902H)</p> -->
+  </div>
+  <div  class="content">
+
+    <div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);">
+      <div class="icon"style="  background-image: url('/src/assets/images/bj2.png');
+  background-size: 100% 100%;">
+        <div class="content">
+          <img src="/src/assets/images/tp.png">
+        </div> 
+        <h1>《计算机导论》</h1>
+        <button></button>
       </div>
-      <!-- <div class="content1">
-				<strong>
-				
-				CURRICULUMS  TABLE</strong>
-				<br><a style="font-size: 15px;">课程列表</a>
-			</div> -->
-      <div class="kp">
-        <div class="kp1">
-          <div class="kp2"><img src="/src/assets/images/rjgz.jpg" /></div>
-          <div class="kp3">
-            <strong>软件构造</strong>
-            <br />
-            <a style="color: #7d7d7d; font-size: 13px">张三</a>
-          </div>
-        </div>
-        <div class="kp1">
-          <div class="kp2"><img src="/src/assets/images/ls.jpg" /></div>
-          <div class="kp3">
-            <strong>离散数学</strong>
-            <br />
-            <a style="color: #7d7d7d; font-size: 13px">张三</a>
-          </div>
-        </div>
-        <div class="kp1">
-          <div class="kp2"><img src="/src/assets/images/xs.jpg" /></div>
-          <div class="kp3">
-            <strong>形式与政策</strong>
-            <br />
-            <a style="color: #7d7d7d; font-size: 13px">张三</a>
-          </div>
-        </div>
-        <div class="kp1">
-          <div class="kp2"><img src="/src/assets/images/dx.png" /></div>
-          <div class="kp3">
-            <strong>大学体育</strong>
-            <br />
-            <a style="color: #7d7d7d; font-size: 12px">张三</a>
-          </div>
-        </div>
-        <div class="kp1">
-          <div class="kp2"><img src="/src/assets/images/rjgz.jpg" /></div>
-          <div class="kp3">
-            <strong>高级编程</strong>
-            <br />
-            <a style="color: #7d7d7d; font-size: 13px">张三</a>
-          </div>
-        </div>
-        <div class="kp1">
-          <div class="kp2"><img src="/src/assets/images/sj.png" /></div>
-          <div class="kp3">
-            <strong>数据库与应用原理</strong>
-            <br />
-            <a style="color: #7d7d7d; font-size: 13px">张三</a>
-          </div>
-        </div>
-        <div class="kp1">
-          <div class="kp2"><img src="/src/assets/images/wl.png" /></div>
-          <div class="kp3">
-            <strong>物理</strong>
-            <br />
-            <a style="color: #7d7d7d; font-size: 13px">张三</a>
-          </div>
-        </div>
-        <div class="kp1">
-          <div class="kp2"><img src="/src/assets/images/wl.png" /></div>
-          <div class="kp3">
-            <strong>物理</strong>
-            <br />
-            <a style="color: #7d7d7d; font-size: 13px">张三</a>
-          </div>
+      <div class="icon1">
+        <div class="icon"><img src="/src/assets/images/kc1.png"></div>
+        <div class="icon"><img src="/src/assets/images/kc2.png"></div>
+        <div class="icon"><img src="/src/assets/images/kc3.png"></div>
+      </div>
+      <div class="txt">
+        <h1>&nbsp;&nbsp;课程简介</h1>
+        <p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
+          论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p>
+          <div class="box" >
+            <p style="font-size: 14px;color: #6B6B6B;" >总学时 ：36小时</p>
+          <p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p>
+          <p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p>
+          <p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p>
         </div>
       </div>
-    </div>
+      </div>
 
-    <div class="main">
-      <div class="news center" style="display: flex; flex-direction: column">
-        <div class="title clear" style="margin-top: 100px">
-          <h2>
-            <span>课程</span>
-            动态
-            <br />
-            <em>CURRICULUMSdynamics</em>
-          </h2>
-          <a href="">更多>></a>
-        </div>
-        <div class="news-lunbo clear">
+
+    <div class="content1">
+      <div class="txt">
+        <h1>&nbsp;&nbsp;课程简介</h1>
+        <p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
+          论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p>
           <div class="box">
-            <ul>
-              <!-- <li class="curr"style="margin-left: 110px;width: 480px;"> -->
-              <div class="block" style="margin-left: 0px">
-                <span class="demonstration"></span>
-                <el-carousel height="370px" width="300px">
-                  <el-carousel-item v-for="item in imgList" :key="item.id">
-                    <!-- <h3 class="small">{{ item }}</h3> -->
-                    <img
-                      style="width: 100%; height: 100%"
-                      :src="item.idView"
-                      alt=""
-                    />
-                    <!-- <img src="../../../public/wl.png" alt=""> -->
-                  </el-carousel-item>
-                </el-carousel>
-              </div>
-              <!-- <img src="/src/assets/images/0.jpg" id='images0'/>  -->
-              <!-- <img src="img/index/news1.png" alt=""> -->
-              <!-- </li> -->
-              <!-- <li><img src="img/index/news2.png" alt=""></li> -->
-            </ul>
-            <div class="leftBtn">&#xe67d;</div>
-            <div class="rightBtn">&#xe63d;</div>
-          </div>
-          <!--news详情-->
-          <div class="newsDetail">
-            <div class="newsDetail-top">
-              <h2>
-                二十大时光｜贵州50名蜡染传承人共制20米蜡染长卷深情祝福祖国
-              </h2>
-              <p>
-                近日，黔东南州丹寨县50位蜡染传承人，用独特的苗族蜡染技艺，联手绘制了一幅20米蜡染长卷，献礼党的二十大....
-              </p>
-            </div>
-            <ul>
-              <li><a href="新闻.html">国家级非遗之蓝印花布之印染工艺</a></li>
-              <li><a href="新闻1.html">以蜡为艺，遇见蓝底白花衣衫</a></li>
-              <li>
-                <a href="新闻2.html">贵州丹寨的苗族蜡染：传承千年而走向世界</a>
-              </li>
-              <li>
-                <a href="新闻3.html">
-                  这是推动传统蜡染技艺与现代审美艺术相结合的一种全新尝试
-                </a>
-              </li>
-              <li>
-                <a href="新闻4.html">
-                  非遗：爱上蜡染的4大理由，为民族工艺点赞！
-                </a>
-              </li>
-              <li>
-                <a href="新闻5.html">
-                  让蜡染这个深藏在大山深处的瑰宝走向更加广阔的舞台
-                </a>
-              </li>
-            </ul>
-          </div>
+            <p style="font-size: 14px;">总学时 ：36小时</p>
+          <p style="font-size: 14px;">总学分 ：2.0分</p>
+          <p style="font-size: 14px;">章节数 ：10章</p>
+          <p style="font-size: 14px;">知识点总数 ：33个</p>
         </div>
       </div>
-    </div>
+      <div class="icon"style=" background-image: url('/src/assets/images/bj1.png'); ">
+        <div class="content">
+          <img src="/src/assets/images/tp.png">
+        </div> 
+        <h1>《计算机导论》</h1>
+        <button></button>
+      </div>
+      <div class="icon1">
+        <div class="icon"><img src="/src/assets/images/kc1.png"></div>
+        <div class="icon"><img src="/src/assets/images/kc2.png"></div>
+        <div class="icon"><img src="/src/assets/images/kc3.png"></div>
+      </div>
+      </div>
+
 
-    <div class="v" style="margin-top: 70px">
-      <div
-        class="content1"
-        style="float: left; margin-left: 150px; width: 50%; margin-top: 20px"
-      >
-        <h2>
-          <span>教师</span>
-          介绍
-          <br />
-          <em>Teacher introduction</em>
-        </h2>
+      <div class="content1" style=" background:linear-gradient(#F0F4FA,#F0F4FA,#F0F4FA);">
+      <div class="icon"style="  background-image: url('/src/assets/images/bj2.png');
+  background-size: 100% 100%;">
+        <div class="content">
+          <img src="/src/assets/images/tp.png">
+        </div> 
+        <h1>《计算机导论》</h1>
+        <button></button>
       </div>
-      <!-- <div class="content1"style="float: left;margin-left: 150px;width: 50%;margin-top: 20px;"><strong>
-			Teacher introduction</strong>
-			<br><a style="font-size: 15px;">教师介绍</a>
-			</div> -->
-      <div class="v0"></div>
-      <div class="v1" style="margin-top: 20px">
-        <div class="v2">
-          <div class="v21111">
-            <img src="/src/assets/images/sj.png" width="100%" height="100%" />
-          </div>
-          <div class="v20">
-            <div class="v21">
-              <div class="v211">教师</div>
-              <div class="v2111">
-                <p style="color: #517090; line-height: 30px; font-size: 20px">
-                  EXHIBITION HALL大理白族自治州博物馆展厅
-                </p>
-                <br />
-                <p style="color: #8e8e8e; line-height: 25px">
-                  青铜文化苍洱大地总是不断赐予人们智慧和灵感，远在3000多年前，生活在这片古老而神奇土地上的人们，用劳动和智慧开启了滇西青铜文明的时代之门，
-                </p>
-                <br />
-                <p style="color: #636363; line-height: 25px">查看更多</p>
-              </div>
-            </div>
-          </div>
-          <!-- <div class="v22"><img src="img/sy3.jpg" width="100%" height="100%" id='img0'/></div> -->
-        </div>
-        <div class="v3">
-          <div class="v31">
-            <div class="v311">
-              <p>MORE ></p>
-            </div>
-          </div>
-          <div class="v31">
-            <div class="v3111">
-              <h4>DALI</h4>
-              <br />
-              <p>EXHIBITION</p>
-            </div>
-            <p style="font-size: 18px; text-align: center">大理通史展厅</p>
-          </div>
-          <div class="v31">
-            <div class="v3111">
-              <h4>DALI</h4>
-              <br />
-              <p>EXHIBITION</p>
-            </div>
-            <p style="font-size: 18px; text-align: center">大理青铜文化展厅</p>
-          </div>
-          <div class="v31">
-            <div class="v3111">
-              <h4>DALI</h4>
-              <br />
-              <p>EXHIBITION</p>
-            </div>
-            <p style="font-size: 18px; text-align: center">大理陶瓷艺术展厅</p>
-          </div>
-          <div class="v31">
-            <div class="v3111">
-              <h4>DALI</h4>
-              <br />
-              <p>EXHIBITION</p>
-            </div>
-            <p style="font-size: 18px; text-align: center">大理白族文化展厅</p>
-          </div>
+      <div class="icon1">
+        <div class="icon"> <img src="/src/assets/images/kc1.png" ></div>
+          <div class="icon"><img src="/src/assets/images/kc2.png"></div>
+        <div class="icon"><img src="/src/assets/images/kc3.png"></div>
+      </div>
+      <div class="txt">
+        <h1>&nbsp;&nbsp;课程简介</h1>
+        <p style="color: #A6A6A6;">计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
+          论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p>
+          <div class="box" >
+            <p style="font-size: 14px;color: #6B6B6B;" >总学时 ：36小时</p>
+          <p style="font-size: 14px;color: #6B6B6B;">总学分 ：2.0分</p>
+          <p style="font-size: 14px;color: #6B6B6B;">章节数 ：10章</p>
+          <p style="font-size: 14px;color: #6B6B6B;">知识点总数 ：33个</p>
         </div>
       </div>
-    </div>
+      </div>
+
+
 
-    <div class="q0">
-      <div class="q"></div>
-      <div class="qq"></div>
-      <div class="q1">
-        <div class="q11">
-          <br />
-          <br />
-          <p style="font-size: 35px; color: white">学术动态</p>
-          <br />
-          <br />
-          <p style="color: white; line-height: 30px; font-size: 14px">
-            清华大学马克思主义学院的《马克思主义基本原理概论》课组（简称原理课组)，于2005年根据教育部思想政治理论课课程改革的要求，以原有的《
-            马克思主义哲学原理》课组为基础组建而成。目前承担着全校本科生的思想政治理论课必修课《马克思主义基本原理概论》的教学工作。
-          </p>
-          <br />
-          <br />
-          <p style="float: right; color: #f39800">
-            <a href="" style="color: #f39800">查看更多</a>
-          </p>
+    <div class="content1">
+      <div class="txt">
+        <h1>&nbsp;&nbsp;课程简介</h1>
+        <p>计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导
+          论的简介计算机导论的简介计算机导论的简介计算机导论的简介计算机导论的简介</p>
+          <div class="box">
+            <p style="font-size: 14px;">总学时 ：36小时</p>
+          <p style="font-size: 14px;">总学分 ：2.0分</p>
+          <p style="font-size: 14px;">章节数 ：10章</p>
+          <p style="font-size: 14px;">知识点总数 ：33个</p>
         </div>
       </div>
-    </div>
-    <!-- <script src="//unpkg.com/vue@2/dist/vue.js"></script>
-		<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script> -->
-    <!-- 	<div id="app">
-		<template>
-		  <el-carousel :interval="5000" arrow="always">
-		    <el-carousel-item v-for="item in 2" :key="item">
-		      <h3>{{ item }}</h3>
-		    </el-carousel-item>
-		  </el-carousel>
-		</template>
-		</div> -->
-    <div class="f"></div>
-    <div class="footer">
-      <div class="footer1">联系方式：86-23-9999</div>
-      <div class="footer10">
-        <div class="footer2">
-          <h4>关于图课</h4>
-          <br />
-          <a style="font-size: 14px; line-height: 20px">关于我们</a>
-          <a style="font-size: 14px; line-height: 20px">品牌故事</a>
-          <a style="font-size: 14px; line-height: 20px">企业文化</a>
-          <a style="font-size: 14px; line-height: 20px">关于我们</a>
-        </div>
-        <div class="footer2">
-          <h4>课程动态</h4>
-          <br />
-          <a style="font-size: 14px; line-height: 20px">关于我们</a>
-          <a style="font-size: 14px; line-height: 20px">品牌故事</a>
-          <a style="font-size: 14px; line-height: 20px">企业文化</a>
-          <a style="font-size: 14px; line-height: 20px">关于我们</a>
-        </div>
-        <div class="footer2">
-          <h4>课程动态</h4>
-          <br />
-          <a style="font-size: 14px; line-height: 20px">关于我们</a>
-          <a style="font-size: 14px; line-height: 20px">品牌故事</a>
-          <a style="font-size: 14px; line-height: 20px">企业文化</a>
-        </div>
-        <div class="footer2" style="width: 190px">
-          <h4>联系我们</h4>
-          <br />
-          <a style="font-size: 14px; line-height: 20px; float: left">
-            地址：河南省驻马店黄淮学院
-          </a>
-          <a style="font-size: 14px; line-height: 20px; float: left">
-            联系电话：111111111111
-          </a>
-        </div>
+      <div class="icon" style=" background-image: url('/src/assets/images/bj1.png'); ">
+        <div class="content">
+          <img src="/src/assets/images/tp.png">
+        </div> 
+        <h1>《计算机导论》</h1>
+        <button></button>
+      </div>
+      <div class="icon1">
+        <div class="icon"><img src="/src/assets/images/kc1.png"></div>
+        <div class="icon"><img src="/src/assets/images/kc2.png"></div>
+        <div class="icon"><img src="/src/assets/images/kc3.png"></div>
+      </div>
       </div>
     </div>
-    <div class="footer3">
-      COPYRIGHT 2011-2017 C TIDG cO,LTD.ALL RIGHTS RESERVED， DESIGN BY JADEBOX
-      .渝ICP备15000587号-2
+    <!-- 底部 -->
+  <div class="footer">
+    <h3>软件工程专业</h3>
+			<h1>教学一体化平台</h1>
+			<p>关于我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; &nbsp;联系我们&nbsp; &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; 服务协议</p>
+		<p style="font-size: 13px;margin-top: 70px">黄淮学院版权所有@2023 湘豫CP备 19005950号-1<br>
+违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com</p>
     </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-const imgList = ref([
-  { id: 0, idView: '../../../public/wl.png' },
-  { id: 1, idView: '../../../public/0.jpg' },
-  { id: 2, idView: '../../../public/1.jpg' },
-  { id: 3, idView: '../../../public/2.jpg' },
-])
+import {} from 'vue'
+import axios from 'axios';
 </script>
 
 <style lang="scss" scoped>
-// .header{
-// 	/* 头部 */
-// }
+* {
+    margin: 0;
+    padding: 0;
+    /* box-sizing: border-box; */
+    /* font: 14px/28px "微软雅黑"; */
+}
+
+
 ul {
   list-style: none;
 }
@@ -367,680 +173,284 @@ ul {
 a {
   text-decoration: none;
 }
-
 body {
   /* 宽度占浏览器可视区域的宽度 */
   width: 100vm;
   /* height: 1500px; */
-  background-color: #f6f6f6;
-}
-
-.content {
-  /* 内容 */
-  width: 75%;
-  height: 540px;
-  margin: auto;
-  margin-top: 20px;
-  /* background-color: #336699; */
+  // background-color: #FFFFFF;
 }
-
-.content1 {
-  /* 内容 */
+img{
   width: 100%;
-  height: 50px;
-  float: left;
-  font-size: 20px;
-  /* background-color: #336699; */
-  /* color: #8a8a8a; */
-}
-
-.content1 h2 {
-  float: left;
-  height: 60px;
-  /* margin-left: 120px; */
-  font-size: 28px;
-  color: #111;
-}
-
-.content1 h2 span {
-  display: inline-block;
-  height: 35px;
-  line-height: 35px;
-  font-size: 28px;
-  color: #336699;
-}
-
-.content1 h2 em {
-  display: block;
-  height: 16px;
-  line-height: 16px;
-  font-size: 12px;
-  color: #5c5c5c;
-  text-transform: uppercase;
-}
-
-.content1 a {
-  float: right;
-  margin-right: 12px;
-  line-height: 46px;
-  color: #2d2d2d;
+  height: 100%;
 }
-
-.kp {
+// 头
+.header{
   width: 100%;
-  height: 440px;
-  // float: left;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin-top: 40px;
-  /* background-color: aquamarine; */
-}
+	height: 300px;
+  background-image: url('/src/assets/images/top.png');
+  background-size: 100% 100%;
+	// background:linear-gradient(#74a5ff,#91b7ff,#A4c3ff);
 
-.kp1 {
-  width: 22%;
-  height: 220px;
-  // float: left;
-  // margin-left: 20px;
-  margin-top: 20px;
-  box-shadow: 0 1px 5px #b8babd;
-  background-color: #ffffff;
-}
 
-.kp1:hover {
-  background-color: #f3f3f3;
 }
-
-.kp2 {
-  width: 90%;
-  height: 150px;
-  margin: auto;
-  margin-left: 12px;
-  margin-top: 10px;
-  /* background-color: #468a51; */
+// 导航栏
+.header .nav{
+  width: 95%;
+  height: 100px;
+  // background-color: #3D78F5;
 }
+.header .nav1{
+  float: right;
+  width: 24%;
+	height: 10%;
+	margin-right: 20px;
+	// background-color: #6759ff; 
 
-.kp3 {
-  width: 90%;
-  height: 30px;
-  margin: auto;
-
-  margin-top: 10px;
-  /* background-color: #468a51; */
 }
-
-.logo {
-  width: 5%;
-  height: 50px;
-  // margin: auto;
+.header .nav1 ul li{
   float: left;
-  position: absolute;
-  top: 2px;
-  left: 607px;
-}
-
-.login {
-  width: 10%;
-  height: 50px;
+		margin-left: 5px;
+		line-height: 20px;
+		color: white;
+		font-size: 12px;
+		text-align: center;
+		// border-right: 1px solid #FFFFFF; 
+}
+.header .nav2{
+  float: right;
+  
+  // padding-right: -20px;
+  width: 68%;
+	height: 25%;
+  margin-top: 30px;
+	// margin-right: -260px;
+	// background-color: #6759ff; 
+}
+.header .nav2 ul li{
   float: left;
-  line-height: 50px;
-  background-color: #336699;
-  font-size: 15px;
-}
-
-img {
-  width: 100%;
-  height: 100%;
+		margin-left: 20px;
+		// line-height: 40px;
+		color: white;
+		font-size: 15px;
+		text-align: center;
 }
-
-.nav {
-  /* 导航 */
-  width: 64%;
-  height: 50px;
-  // margin: auto;
-  position: absolute;
-
-  left: 250px;
-  top: 78px;
-  border-radius: 30px 30px 30px 30px;
-  background-color: #3685e5;
+.header .nav2 ul li:hover{
+  color: #74a5ff;
 }
-
-.nav ul {
-  width: 100%;
-  height: 50px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  border-radius: 30px 30px 30px 30px;
+.header .inco{
+  float: left;
+  width: 48%;
+  height: 65.1%;
+  margin-left: 80px;
+  // background-color: #6759ff;
+}
+.header h1{
+  font-size: 50px;
+  margin-top: 23px;
+  font-weight:bolder;
+  color: #FFFFFF;
+  float: right;
+  margin-right: 173px
   // float: left;
-  // margin-left: 40px;
-  /* margin:  auto; */
-  background-color: #3685e5;
+  // margin-left: 779px;
 }
-
-.nav ul li {
-  // float: left;
-  width: 85px;
-  height: 50px;
-  line-height: 50px;
+.header p{
   font-size: 15px;
-  text-align: center;
-}
-
-.nav li a {
-  color: #fff;
-  text-decoration: none;
-  display: block;
-}
-
-.nav li a:hover {
-  background-color: #66a0da;
-  font-size: 15px;
-  font-weight: bold;
-  border-radius: 30px 30px 30px 30px;
-}
-
-.lbt {
-  width: 100%;
-  height: 450px;
-  /* background-color: antiquewhite; */
-}
-
-.f {
-  width: 100%;
-  height: 160px;
-}
-
-.footer {
-  /* 尾部 */
-
-  width: 100%;
-  height: 300px;
-  background-color: #323232;
-}
-
-.footer1 {
-  /* 尾部 */
-
-  width: 70%;
-  margin: auto;
-  text-align: center;
-  padding-top: 40px;
-  color: #949494;
-  border-bottom: 1px solid #cccccc;
-  height: 30px;
-  /* background-color: #b4b4b4; */
-}
-
-.footer10 {
-  /* 尾部 */
-  padding-top: 20px;
-  width: 73%;
-  display: flex;
-  margin: auto;
-  height: 200px;
-  /* background-color: #949494; */
+  margin-top: 10px;
+  // font-weight:bolder;
+  color: #FFFFFF;
+  float: right;
+  margin-right: 200px;
 }
-
-.footer2 {
-  /* 尾部 */
-
-  width: 8%;
+.logo{
+  width: 15%;
+  height: 30%;
   float: left;
-  margin-left: 90px;
-  text-align: center;
-
-  color: #949494;
-
-  height: 200px;
-  /* background-color: #b4b4b4; */
+  margin-left: 80px;
+  // background-color: #8974ff;
+  // background-image: url('/src/assets/images/bj3.png');
+  // background-size: 100% 100%;
 }
-
-.footer3 {
-  /* 尾部 */
-
+// 内容
+.content{
   width: 100%;
   margin: auto;
-  text-align: center;
-  font-size: 14px;
-  color: #949494;
-
-  height: 2x0px;
-  background-color: #222222;
-}
-
-// .column{
-// 	/* 栏目 */
+  
+}
+// .content1 .container{
+//   width: 80%;
+//   height: 380px;
+//   display: flex;
+//   margin: auto;
+//   margin-top: 60px;
 // }
-.v {
+.content1{
   width: 100%;
-  height: 600px;
-  background-color: #f4f4f4;
-}
-
-.v0 {
-  height: 70px;
-  width: 100%;
-}
-
-.v1 {
-  width: 80%;
-  height: 400px;
+  height: 442px;
+  display: flex;
   margin: auto;
-  /* background-color: #F46032; */
-  /* background-color: antiquewhite; */
+  margin-top: 60px;
+  padding: 0 80px 0 80px;
+  background:linear-gradient(#98BBFF,#A9C6FF,#d5e1f6);
 }
-
-.v2 {
-  width: 75%;
-  height: 100%;
-  float: left;
-  background-image: url('/src/assets/images/bj3.png');
-  background-size: 100% 100%;
-  /* background-color: #f4f4f4; */
-}
-
-.v20 {
-  width: 50%;
-  height: 100%;
-  /* background-color: #ffffff; */
-}
-
-.v21 {
-  /* position: absolute; */
-  width: 100%;
-  height: 100%;
-  float: left;
-  background-color: #dbe8f6;
-  /* background-color: #952913; */
-}
-
-.v211 {
-  width: 60%;
-  height: 35%;
-  float: left;
-  background-color: #336699;
-  text-align: center;
-  line-height: 120px;
-  color: white;
-  font-size: 30px;
-}
-
-.v2111 {
-  width: 80%;
-  height: 50%;
-
-  margin-top: 24%;
-  margin-left: 25px;
-  /* background-color: #F39800; */
-}
-
-.v21111 {
-  width: 50%;
-  height: 100%;
-  float: right;
-  /* margin-top: 24%; */
-  /* margin-left: 25px; */
-  /* background-color: #F39800; */
-}
-
-/* 	.v22{
-				position: absolute; 
-				width: 34%;
-				height: 50%;
-			float: left;
-			left: 36%;
-			top: 95%;
-			
-			} */
-.v3 {
+.content1 .txt{
   width: 22%;
-  height: 100%;
-  float: left;
-  margin-left: 3%;
-  background-color: white;
-  /* background-color: aqua; */
-}
-
-.v31 {
-  width: 100%;
-  height: 65px;
-  margin-top: 15px;
-
-  /* background-color: #4a957b; */
-}
-
-button {
-  float: right;
-  width: 75px;
-  height: 35px;
-  /* border:black; */
-  border: 1px solid black;
-  background-color: white;
-  color: black;
-  float: left;
-  margin-left: 50px;
-}
-
-.v311 {
-  width: 50%;
-  text-align: center;
-  line-height: 40px;
-  height: 60%;
-  float: right;
-  background-color: #cccccc;
-}
-
-.v311 p:hover {
-  background-color: #004586;
-  color: white;
-  font-weight: bold;
-}
-
-.v3111 {
-  width: 50%;
-  height: 100%;
-  float: left;
-  margin-left: 25px;
-  border-right: 2px solid #cccccc;
-  /* background-color: #CCCCCC; */
-}
-
-.v3111 h3 {
-  font-size: 20px;
-  /* text-align: center; */
-}
-
-.v3111 p {
-  color: #cccccc;
-  font-size: 15px;
-  /* text-align: center; */
-}
-
-.v3111 :hover {
-  color: #004586;
-  font-weight: bold;
-}
-
-.v31 :hover {
-  color: #004586;
-  font-weight: bold;
-}
-
-.q0 {
-  width: 100%;
-  height: 420px;
-}
-
-.q1 {
-  width: 60%;
-  height: 340px;
-  position: absolute;
-  top: 2291px;
-  float: left;
-  left: 30%;
-  background-image: url('/src/assets/images/3.png');
-}
-
-.q11 {
-  width: 80%;
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-evenly;
+  height: 350px;
   margin: auto;
+  // background-color: #d4e2fe;
 }
-
-.q {
-  width: 50%;
-  height: 420px;
-  float: left;
-  background-image: url('/src/assets/images/1.png');
-  background-color: #dbe8f6;
+.content1 .txt h1{
+  font-size: 20px;
+  height: 30px;
+  font-size: 16px;
+  line-height: 30px;
+  border-left:3px solid #3374FF;
+  font-weight:bolder;
+  color: #3374FF;
+  // margin-top: 30px;
 }
-
-.qq {
-  width: 50%;
-  height: 420px;
-  float: left;
-
-  background-color: #dbe8f6;
+.content1 .txt p{
+  font-size: 17px;
+  color: #FFFFFF;
 }
-
-.swiper-container {
+.content .txt .box{
   width: 100%;
-  height: 100%;
-}
-
-.swiper-slide {
-  text-align: center;
-  font-size: 18px;
-  background: #fff;
-
-  /* Center slide text vertically */
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
+  // background-color: #8974ff;
+  height: 80px;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
-
-/*main*/
-.main .title {
-  width: 95%;
-  height: 46px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
 }
-
-.main .title h2 {
-  float: left;
-  height: 60px;
-  margin-left: 120px;
-  font-size: 28px;
-  color: #111;
-}
-
-.main .title h2 span {
-  display: inline-block;
-  height: 35px;
-  line-height: 35px;
-  font-size: 28px;
-  color: #336699;
+.content1 .icon{
+  width: 53%;
+  height: 360px;
+  margin: auto;
+  // background-image: url('/src/assets/images/bj1.png');
+  background-size: 102% 103.5%;
+  // background-color: #7f98cb;
 }
-
-.main .title h2 em {
-  display: block;
-  height: 16px;
-  line-height: 16px;
-  font-size: 12px;
-  color: #5c5c5c;
-  text-transform: uppercase;
+.content1 .icon h1{
+  color: white;
+  font-size: 24px;
+  font-weight:bolder;
+  z-index:999;
+  margin-left: 60px;
+  margin-top: 20px;
 }
-
-.main .title a {
+.content1 .icon button{
+  background-color: #FEC861;
+  opacity: 0;
+  width: 73px;
+  height: 50px;
+  z-index:999;
   float: right;
-  margin-right: 12px;
-  line-height: 46px;
-  color: #2d2d2d;
-}
-
-/*新闻动态*/
-.main .news {
-  margin-top: 40px;
+  margin-right: 13px;
+  margin-top: -40px;
+}
+.content1 .icon button:hover{
+  background-color: #FEC861;
+  opacity: 0.2;
+  border:none ;
+  
+}
+.content1 .icon .content{
+  width: 87%;
+  height: 73.8%;
+  margin: auto;
+  border-radius: 15px 15px 15px 15px; 
+  margin-top: 35px;
+  background-color: #FFFFFF;
 }
+.content1 .icon .content img{
+  width: 95%;
+  height: 95%;
+ float: right;
+ margin-top: 15px;
 
-.main .news .news-lunbo {
-  margin-top: 19px;
-  display: flex;
-  width: 100%;
-  height: 346px;
 }
-
-.main .news .box {
-  float: left;
-  position: relative;
-  margin-left: 110px;
-  margin-top: 20px;
-  width: 515px;
-  height: 100%;
+.content1 .icon1{
+  width: 13%;
+  height: 380px;
+  margin: auto;
+  // background-color: #486aae;
 }
-
-.main .news .box ul {
+.content1 .icon1 .icon{
   width: 90%;
-  height: 100%;
+  height: 27%;
+  // padding-top: 20px;
+  border-radius: 15px 15px 15px 15px; 
+  margin-top: 20px;
+  box-shadow:  3px 3px 15px rgb(173, 171, 171);
+  // margin: auto;
+  background-color: #A4c3ff;
+}
+.content1 .icon1 .icon .image{
+        width: 100%;
+        height: 100%;
+        background-size: cover;
+        image-orientation: 100% 100%;
+        border-radius: 15px 15px 15px 15px;
+        // object-fit:cover;
+        /* 删除图片下方的多余空间 */
+    }
+
+.content1 .icon .box{
+  width: 85%;
+  height: 300px;
+  float: left;
+  margin-top: 30px;
+  border-radius: 10px 10px 10px 0px;
+  background-color: #D9D9D9;
 }
 
-.main .news .box ul li {
-  position: absolute;
-  top: 0;
-  left: 0;
+// 尾部
+.footer{
+  margin-top: 100px;
   width: 100%;
-  height: 100%;
-  display: none;
+	height: 250px;
+	// position: absolute;
+	text-align: center;
+	background-color: #252527;
 }
-
-// .main .news .box ul li.curr {
-//     display: block;
-// }
-
-.main .news .box ul li img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
+.footer h3{
   width: 100%;
-  height: 100%;
-}
-
-.main .news .pageN {
-  position: absolute;
-  bottom: 0;
+		// position: absolute;
+		text-align: center;
+    font-size: 15px;
+    padding-top: 40px;
+		color:#7F9EED;
+    font-weight:bolder;
+}
+.footer h1{
   width: 100%;
-  height: 40px;
-  padding: 8px 13px;
-  background: rgba(51, 1, 0, 0.8);
-  color: #fff;
-}
-
-.main .news .pageN p {
-  float: right;
-  height: 100%;
-}
-
-.main .news .pageN p a {
-  float: left;
-  margin-left: 4px;
-  display: block;
-  width: 27px;
-  height: 24px;
-  background: rgba(82, 36, 36, 0.8);
-  line-height: 24px;
-  text-align: center;
-}
-
-.main .news .pageN p a.cur {
-  background: rgba(124, 92, 93, 0.8);
-}
-
-.main .news .leftBtn,
-.main .news .rightBtn {
-  position: absolute;
-  width: 30px;
-  height: 30px;
-  background-color: #ccc;
-  text-align: center;
-  color: #fff;
-  cursor: pointer;
-  line-height: 30px;
-  font-family: icon;
-  font-size: 10px;
-  font-weight: 600;
-  display: none;
-}
-
-.main .news .leftBtn {
-  top: 50%;
-  left: 20px;
-}
-
-.main .news .rightBtn {
-  top: 50%;
-  right: 20px;
-}
-
-.main .news .newsDetail {
-  float: right;
-  width: 506px;
-  height: 100%;
-  padding: 0 12px;
-}
-
-.main .news .newsDetail .newsDetail-top {
-  width: 92%;
-  padding: 15px 0;
-  border-bottom: 1px solid #c2c2c2;
-}
-
-.main .news .newsDetail .newsDetail-top h2 {
-  width: 100%;
-  line-height: 38px;
-  color: #336699;
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.main .news .newsDetail .newsDetail-top p {
+		// position: absolute;
+		font-family: "kaiti_gb2312";
+	margin-top: 10px;
+	font-size: 25px;
+		color:#7F9EED;
+    font-weight:bolder;
+}
+.footer p{
   width: 100%;
-  height: 56px;
-  color: #767676;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.main .news .newsDetail ul {
-  padding: 12px 0;
-  overflow: hidden;
-}
-
-.main .news .newsDetail ul li {
-  line-height: 34px;
-}
-
-.main .news .newsDetail ul li:before {
-  content: '';
-  display: inline-block;
-  margin-right: 14px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: #9f9f9f;
-}
-
-.main .news .newsDetail ul li a {
-  color: #2d2d2d;
-}
-
-.main .news .newsDetail ul li a:hover {
-  color: #336699;
-}
-
-.el-carousel__item h3 {
-  color: #475669;
-  font-size: 14px;
-  opacity: 0.75;
-  line-height: 150px;
-  margin: 0;
-}
-
-.el-carousel__item:nth-child(2n) {
-  background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-  background-color: #d3dce6;
-}
+		height: 20px;
+		// position: absolute;
+		font-family: "kaiti_gb2312";
+	margin-top: 25px;
+	font-size: 17px;
+		color:#7F9EED;
+}
+// .footer b{
+// 	font-family: "kaiti_gb2312";
+// 	font-size: 13px;
+// 	color:#7F9EED;
+//   position: absolute;
+//   margin-top: 174px;
+  
+// }
 </style>
+