WEB

src/components/commonComponents/headerTab.vue

       this.nowPath = this.$route.path;
       if (this.nowPath == "/") {
         this.activeIndex = "1";
-      } else if (this.nowPath == "/solution") {
+      } else if (this.nowPath.match('\/solution')) {
         this.activeIndex = "2";
-      } else if (this.nowPath == "/productCenter") {
+      } else if (this.nowPath.match('\/productCenter')) {
         this.activeIndex = "3";
-      } else if (this.nowPath == "/newsInformation") {
+      } else if (this.nowPath.match('\/newsInformation')) {
         this.activeIndex = "4";
       } else {
         this.activeIndex = "5";
 <style scoped >
 .header-tab {
   width: 100%;
+  min-width: 1260px;
   position: absolute;
   top: 0;
   padding: 20px 0;
   vertical-align: middle;
   color: #fff;
   position: relative;
+  font-weight: 400;
 }
 .sub-nav-menu{
-  
-  
+  width: 50%;
+  min-width: 700px;
+  float: right;
+  margin-right: 10%;
 }
 .section{
   display: flex;
   overflow: hidden;
   line-height: 60px;
   color: #fff;
-  /* background-color: #fff; */
   animation: Height 1s;
 }
+.sub-nav-menu .section span{
+    font-weight: 100;
+  }
+  .sub-nav-menu .section span:hover{
+    font-weight: 400;
+    
+  }
 @keyframes Height {
   from{
     height: 0;
 }
 .nav_tittle span{
   z-index: 100;
-  
+  font-size: 18px;
 }
 a {
   text-decoration: none;

src/components/navicard/index.vue

       <div>{{title}}</div>
     </div>
     <div class="body">
-      <div v-for="(item, index) in items" :key="index" @click="clickItem(item, index)" :class="{'item-active': itemActive == index }">
+      <div v-for="(item, index) in items" :key="index" @click="clickItem(item, index)" :class="{'item-active': active - 1 == index }">
         <img v-if="active" :src="item.icon" alt="">
         <div >{{ item.text }}</div>
       </div>
     'id',
     'title',
     'items',
-    'active'
+    'active',
   ],
   data () {
     return {
-      itemActive: -1,
     }
   },
   mounted() {
   },
   methods: {
     clickCard() {
-      this.$emit('update:active', true)
+      this.$emit('update:active', 99)
     },
     clickItem(item, index) {
-      this.itemActive = index
-      this.$emit('update:active', true)
+      this.$emit('update:active', index)
       this.$emit('click', item)
     }
   }

src/components/pages/aboutUs/aboutUs.vue

     }
   }
   .about-main {
-    padding: 40px 300px 100px 300px;
+    padding: 40px 0 100px 0;
     min-height: 600px;
-    position: relative;
+   width: 1130px;
+   margin: auto;
+   display: flex;
+   justify-content: space-between;
     .main-left {
-      position: absolute;
-      left: 400px;
+      
       .logo {
         width: 303px;
         height: 110px;
     .main-right {
       width: 630px;
       text-align: left;
-      position: absolute;
-      left: 840px;
+      
       .main-tit {
         background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
         height: 30px;

src/components/pages/index.vue

         <div class="page-5 fp-auto-height">
           <p class="title">我们的客户</p>
           <div class="logo-box">
-            <img src="../../assets/image/home/logo/Group29.png" alt>
+            <div>
+              <img src="../../assets/image/home/logo/Group29.png" alt>
             <img src="../../assets/image/home/logo/Group32.png" alt>
             <img src="../../assets/image/home/logo/Group35.png" alt>
             <img src="../../assets/image/home/logo/Group40.png" alt>
             <img src="../../assets/image/home/logo/Group41.png" alt>
 
-            <img src="../../assets/image/home/logo/Group30.png" alt>
+            </div>
+            <div>
+              <img src="../../assets/image/home/logo/Group30.png" alt>
             <img src="../../assets/image/home/logo/Group33.png" alt>
             <img src="../../assets/image/home/logo/Group36.png" alt>
             <img src="../../assets/image/home/logo/Group39.png" alt>
             <img src="../../assets/image/home/logo/Group42.png" alt>
+            </div>
 
-            <img src="../../assets/image/home/logo/Group31.png" alt>
+            <div>
+              <img src="../../assets/image/home/logo/Group31.png" alt>
             <img src="../../assets/image/home/logo/Group34.png" alt>
             <img src="../../assets/image/home/logo/Group37.png" alt>
             <img src="../../assets/image/home/logo/Group38.png" alt>
             <img src="../../assets/image/home/logo/Group43.png" alt>
+            </div>
           </div>
           <footerNav class="foot"></footerNav>
         </div>
     overflow: hidden;
     display: flex;
     justify-content: center;
+    align-items: center;
     // position: relative;
     .page-3_con {
-      padding-bottom: 5%;
       .title {
         font-size: 56px;
         // padding-top: 5%;
       color: #fff;
     }
     .logo-box {
-      width: 1200px;
-      height: 320px;
-      margin: 50px auto 60px auto;
+      width: 65.63%;
+      min-width: 980px;
+      height: 53.56%;
+      margin: 0.63% auto;
       img {
-        width: 230px;
-        height: 100px;
-        float: left;
-        margin: 5px;
+        width: 13.14%;
+        min-width: 183px;
+        height: 19.7%;
+        margin: 0.39%;
       }
     }
   }

src/components/pages/newsInformation/newsInformation.vue

     }
   }
   .news-list {
-    padding: 40px 300px 100px 300px;
+    padding: 40px 0 100px 0;
     list-style: none;
+    width: 1280px;
+    margin: auto;
     .list {
-      position: relative;
+      
       padding: 0;
       height: 180px;
+      width: 1280px;
       text-align: left;
       margin: 5px 0;
+      display: flex;
+      justify-content: space-between;
       img {
-        position: absolute;
         width: 300px;
         height: 168px;
-        left: 0;
       }
       .list-right {
-        position: absolute;
-        left: 320px;
+        width: 938px;
         border-bottom: 1px solid #e5e5e5;
         height: 177px;
         .list-tit {

src/components/pages/productCenter/AIwelcome.vue

 <template>
   <div class="product-center">
-    <div class="cover-bg">
+    <!-- <div class="cover-bg">
       <img src="../../../assets/image/program/bg3.png" alt>
-    </div>
+    </div> -->
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
           </div>
         </div>
       </div>
-      <prod-navi class="nav" default="case"></prod-navi>
+      <prod-navi class="nav" default="case-1"></prod-navi>
       <!-- <div class="product_bar">
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
           <el-menu-item index="1" class="item1"  background-color="#fff">
 .nav{
   width: 1280px;
   position: relative;
-  top: -64px;
+  top: 13%;
   // margin-top: -207px;
   margin: auto;
   display: flex;
   align-items: center;
 }
 .product-center {
-  // background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
+  background: url(../../../assets/image/program/bg3.png) no-repeat center;
+  background-size: 100% 100%; 
   width: 100%;
   min-width: 1260px;
-  height: 780px;
+  height: 90%;
   background-size: cover;
   position: relative;
   .cover-bg {
 }
 .product_box {
   width: 1260px;
-  height: 780px;
+  height: 90%;
   margin: 0 auto;
 }
 .product_top {
   width: 1260px;
-  height: 780px;
+  height: 90%;
   display: flex;
   justify-content: center;
 }
   }
 }
 .Features1 {
-     margin: 0 auto 70px auto;
+     margin: 80px auto 70px auto;
       padding: 80px 0;
     }
 .Features2 {

src/components/pages/productCenter/bigscreen.vue

 <template>
   <div class="product-center">
-    <div class="cover-bg">
+    <!-- <div class="cover-bg">
       <img src="../../../assets/image/program/bg3.png" alt>
-    </div>
+    </div> -->
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
           </div>
         </div>
       </div>
-      <prod-navi class="nav" default="case"></prod-navi>
+      
     </div>
-
+    <prod-navi class="nav" default="case-2"></prod-navi>
     <div class="secondHouse-middle">
       <div class="secondHouse_content">
         <div class="Features1">
   // background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
-  height: 780px;
+  height: 90%;
   background-size: cover;
   position: relative;
   .cover-bg {
     }
 }
 .product_box {
-  width: 1260px;
-  height: 780px;
+  width: 100%;
+  min-width: 1260px;
+  height: 100%;
+  background: url(../../../assets/image/program/bg3.png) no-repeat center;
+  background-size: 100% 100%; 
   margin: 0 auto;
+  display: flex;
+  justify-content: center;
 }
 .product_top {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   display: flex;
   justify-content: center;
 }

src/components/pages/productCenter/city.vue

 <template>
   <div class="product-center">
-    <div class="cover-bg">
-            <img src="../../../assets/image/program/bg1.png" alt="">
-          </div>
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
         </div>
       </div>
 
-      <prod-navi class="nav" default="community"></prod-navi>
+      <prod-navi class="nav" default="community-2"></prod-navi>
     </div>
 
     <div class="city_content">
   align-items: center;
 }
 .product-center {
-  // background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  background: url(../../../assets/image/program/bg1.png) no-repeat center;
+  background-size: 100% 100%;
   width: 100%;
   min-width: 1260px;
-  height: 780px;
+  height: 90%;
   background-size: cover;
   position: relative;
   .cover-bg {
 }
 .product_box {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   margin: 0 auto;
 }
 .product_top {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   display: flex;
   justify-content: center;
 }

src/components/pages/productCenter/community.vue

 <template>
   <div class="product-center">
-     <div class="cover-bg">
+     <!-- <div class="cover-bg">
             <img src="../../../assets/image/program/bg1.png" alt="">
-          </div>
+          </div> -->
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
           </div>
         </div>
       </div>
-      <prod-navi class="nav" default="community"></prod-navi>
+      <prod-navi class="nav" default="community-1"></prod-navi>
     </div>
 
     <div class="community">
   align-items: center;
 }
 .product-center {
-  
+  background: url('../../../assets/image/program/bg1.png') no-repeat center;
   width: 100%;
   min-width: 1260px;
-  height: 780px;
-  background-size: cover;
+  height: 90%;
+  background-size: 100% 100%;
   position: relative;
   .cover-bg {
       position: absolute;
 }
 .product_box {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   margin: 0 auto;
 }
 .product_top {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   display: flex;
   justify-content: center;
 }

src/components/pages/productCenter/micro.vue

 <template>
   <div class="product-center">
-    <div class="cover-bg">
+    <!-- <div class="cover-bg">
             <img src="../../../assets/image/program/bg3.png" alt="">
-          </div>
+          </div> -->
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
         </div>
       </div>
       
-      <prod-navi class="nav" default="case"></prod-navi>
+      <prod-navi class="nav" default="case-4"></prod-navi>
     </div>
 
     <div class="secondHouse-middle">
   align-items: center;
 }
 .product-center {
-  
+  background: url(../../../assets/image/program/bg3.png) no-repeat center;
+  background-size: 100% 100%;
   width: 100%;
   min-width: 1260px;
-  height: 780px;
+  height: 90%;
   background-size: cover;
   position: relative;
   .cover-bg {
 }
 .product_box {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   margin: 0 auto;
 }
 .product_top {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   display: flex;
   justify-content: center;
 }

src/components/pages/productCenter/online.vue

 <template>
   <div class="product-center">
-    <div class="cover-bg">
+    <!-- <div class="cover-bg">
       <img src="../../../assets/image/program/bg2.png" alt>
-    </div>
+    </div> -->
     <div class="product_center_top">
       <headerTab></headerTab>
       <div class="product_box">
             </div>
           </div>
         </div>
-
-        <prod-navi class="nav" default="product"></prod-navi>
-        <!-- <div class="product_bar">
-        <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
-          <el-menu-item index="1" class="item1"  background-color="#fff">
-            <div class="order">
-              <div class="blue_bar"></div>
-              <div class="product-order">产品订制</div>
-              <div class="order_bot">
-                <div class="order_bot_online">
-                  <img src="../../../assets/image/logoicon/shape.png" alt="">
-                 
-                  <span>全渠道在线平台</span>
-                </div>
-                <div class="order_bot_secondHandHouse">
-                  <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
-                  
-                  <span>二手房管理平台</span>
-                </div>
-              </div>
-            </div>
-          </el-menu-item>
-          <el-menu-item index="2" class="item2">
-            智慧案场
-          </el-menu-item>
-          <el-menu-item index="3" class="item3">
-            智慧社区
-          </el-menu-item>
-        </el-menu>
-        </div>-->
+        <prod-navi class="nav" default="product-1"></prod-navi>
       </div>
     </div>
     <div class="online_middle">
   align-items: center;
 }
 .product-center {
-  // background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  background: url(../../../assets/image/program/bg1.png) no-repeat center;
   width: 100%;
   min-width: 1260px;
-  // height: 780px;
+  height: 90%;
+  background-size: 100% 100%;
   // background-size: cover;
   position: relative;
   .cover-bg {
 .product_center_top {
   width: 100%;
   min-width: 1260px;
-  height: 780px;
+  height: 100%;
   background-size: cover;
 }
 .product_box {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   margin: 0 auto;
 }
 .product_top {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   display: flex;
   justify-content: center;
 }

src/components/pages/productCenter/prodNavi.vue

   ],
   data () {
     return {
-      activeCard: {
-        product: false,
-        case: false,
-        community: false,
-        [`${this.default}`]: true,
-      },
       productOrder: {
         id: 'product',
         title:  '产品订制',
       },
     }
   },
-  watch: {
-    ['activeCard.product'] (nw, od) {
-      if (nw && !od) {
-        this.activeCard.case = this.activeCard.community = false
-      }
-    },
-    ['activeCard.case'] (nw, od) {
-      if (nw && !od) {
-        this.activeCard.product = this.activeCard.community = false
-      }
-    },
-    ['activeCard.community'] (nw, od) {
-      if (nw && !od) {
-        this.activeCard.case = this.activeCard.product = false
+  computed: {
+    activeCard () {
+      const atv = (this.default || '').split('-')
+      const atvCard = atv[0] || false
+      const atvItem = atv[1] || false
+      return {
+        product: false,
+        case: false,
+        community: false,
+        [`${atvCard}`]: atvItem
       }
     },
-    default (nw) {
-      console.log('--------->', nw)
-      if (!nw) return
-      this.activeCard[nw] = true
-    }
   },
   mounted () {
 

src/components/pages/productCenter/productCenter.vue

 <template>
   <div class="product-center">
-    <div class="cover-bg">
-            <img src="../../../assets/image/program/bg2.png" alt="">
-          </div>
+    <!-- <div class="cover-bg">
+      <img src="../../../assets/image/program/bg2.png" alt="">
+      
+    </div> -->
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
         </el-menu>
       </div>-->
 
-      <prod-navi class="nav" default="product"></prod-navi>
+      <prod-navi class="nav" default="product-2"></prod-navi>
     </div>
     <div class="secondHouse-middle">
       <div class="secondHouse_content">
   border-radius: 4px;
 }
 .product-center {
-  // background: url(../../../assets/image/program/bg2.jpg) no-repeat center;
+  background: url(../../../assets/image/program/bg2.png) no-repeat center;
   width: 100%;
   min-width: 1260px;
-  height: 780px;
+  height: 90%;
+  background-size: 100% 100%;
   // background-color: red;
-  background-size: cover;
+  // background-size: cover;
   // border-radius: 
   position: relative;
   .cover-bg {
+    // background: url('../../../assets/image/program/bg2.png') no-repeat center 100%;
       position: absolute;
       top: 0;
       z-index: -1;
 }
 .product_box {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   margin: 0 auto;
 }
 .product_top {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   display: flex;
   justify-content: center;
 }

src/components/pages/productCenter/release.vue

 <template>
   <div class="product-center">
-    <div class="cover-bg">
+    <!-- <div class="cover-bg">
       <img src="../../../assets/image/program/bg3.png" alt>
-    </div>
+    </div> -->
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
           <div class="product_top_con_right"></div>
         </div>
       </div>
-      <prod-navi class="nav" default="case"></prod-navi>
+      <prod-navi class="nav" default="case-3"></prod-navi>
     </div>
 
     <div class="secondHouse-middle">
   align-items: center;
 }
 .product-center {
-  // background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
+  background: url(../../../assets/image/program/bg3.png) no-repeat center;
   width: 100%;
   min-width: 1260px;
-  height: 780px;
+  height: 90%;
   background-size: cover;
   position: relative;
   .cover-bg {
 }
 .product_box {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   margin: 0 auto;
 }
 .product_top {
   width: 1260px;
-  height: 780px;
+  height: 100%;
   display: flex;
   justify-content: center;
 }

src/components/pages/solution/solution.vue

   <div class="solution">
     <headerTab></headerTab>
     <div class="title">
-      <div class="cover-bg">
+      <!-- <div class="cover-bg">
         <img src="../../../assets/image/program/bannerbg.png" alt>
-      </div>
-      <p class="tit">{{title}}</p>
+      </div> -->
+      <div>
+        <p class="tit">{{title}}</p>
       <p class="label">{{desc}}</p>
       <p class="label">{{desc2}}</p>
       <p class="desc">{{engdesc}}</p>
+      </div>
     </div>
     <div class="solution-main">
       <el-tabs class="tab-bar" v-model="activeName" @tab-click="handleClick">
                     <p class="dis_p1">客户归属、划分不清</p>
                   </div>
                 </div>
-                <!-- <div class="img-con">
-                  <img src="../../../assets/image/wisdom/wisdom01.jpg" alt>营销费用高效果差
-                </div>
-                <div class="img-con">
-                  <img src="../../../assets/image/wisdom/wisdom02.jpg" alt>营销手段传统、数据反馈慢
-                </div>
-                <div class="img-con">
-                  <img src="../../../assets/image/wisdom/wisdom03.jpg" alt>渠道商载客、大量飞单
-                </div>
-                <div class="img-con">
-                  <img src="../../../assets/image/wisdom/wisdom04.jpg" alt>客户归属、划分不清
-                </div> -->
+                
               </div>
             </div>
             <div class="programme-box">
               <div class="label-box">
                 <div class="label-con" :class="bgHover==1?'hover-div':''" @mouseenter="divHover(1)" @mouseleave="leaveHover(1)">
                   <div class="label-img">
-                    <img  v-if="bgHover==1" src="../../../assets/image/program/order/team1.png" alt>
+                    <img v-if="bgHover==1" src="../../../assets/image/program/order/team1.png" alt>
                     <img  v-if="bgHover!=1" src="../../../assets/image/program/order/team.png" alt>
                   </div>
                   <p class="label-tit">专业开发团队</p>
                   <p class="label-desc">团队拥有丰富实战经验，千万金额成功项目，实力不容小觑</p>
                 </div>
-                <div class="label-con" :class="bgHover==2?'hover-div':''" @mouseenter="divHover(2)">
+                <div class="label-con" :class="bgHover==2?'hover-div':''" @mouseenter="divHover(2)" @mouseleave="leaveHover(2)">
                   <div class="label-img">
                     <img v-if="bgHover==2" src="../../../assets/image/program/order/cost1.png" alt>
-                    <img v-else src="../../../assets/image/program/order/cost.png" alt>
+                    <img   v-else src="../../../assets/image/program/order/cost.png" alt>
                   </div>
                   <p class="label-tit">开发费用透明</p>
                   <p class="label-desc">消除行业壁垒，信息不对称问题，价格透明，比肩行业水平</p>
                 </div>
-                <div class="label-con" :class="bgHover==3?'hover-div':''" @mouseenter="divHover(3)">
+                <div class="label-con" :class="bgHover==3?'hover-div':''" @mouseenter="divHover(3)" @mouseleave="leaveHover(3)">
                   <div class="label-img">
                     <img v-if="bgHover==3" src="../../../assets/image/program/order/time1.png" alt>
-                    <img v-else src="../../../assets/image/program/order/time.png" alt>
+                    <img  v-else src="../../../assets/image/program/order/time.png" alt>
                   </div>
                   <p class="label-tit">高质按时交付</p>
                   <p class="label-desc">不随意拖延开发工期，保证高质量按时交付成品</p>
                 </div>
-                <div class="label-con" :class="bgHover==4?'hover-div':''" @mouseenter="divHover(4)">
+                <div class="label-con" :class="bgHover==4?'hover-div':''" @mouseenter="divHover(4)"  @mouseleave="leaveHover(4)">
                   <div class="label-img">
                     <img v-if="bgHover==4" src="../../../assets/image/program/order/Operation.png" alt>
-                    <img v-else src="../../../assets/image/program/order/Operation1.png" alt>
+                    <img  v-else src="../../../assets/image/program/order/Operation1.png" alt>
                   </div>
                   <p class="label-tit">持续运营支持</p>
                   <p class="label-desc">按需提供软件上线后运营支持，修复漏洞服务</p>
                 </div>
-                <div class="label-con" :class="bgHover==5?'hover-div':''" @mouseenter="divHover(5)">
+                <div class="label-con" :class="bgHover==5?'hover-div':''" @mouseenter="divHover(5)" @mouseleave="leaveHover(5)">
                   <div class="label-img">
                     <img v-if="bgHover==5" src="../../../assets/image/program/order/afterSale1.png" alt>
-                    <img v-else src="../../../assets/image/program/order/afterSale.png" alt>
+                    <img  v-else src="../../../assets/image/program/order/afterSale.png" alt>
                   </div>
                   <p class="label-tit">售后服务周到</p>
                   <p class="label-desc">秉承顾客至上理念，全方位跟进需求，专业解答您的所有疑惑</p>
       desc2: "",
       engdesc: "Intelligent face risk control system",
       colorHover: 2,
-      bgHover: 3
+      bgHover: 3,
+     
     };
   },
   methods: {
     },
     leaveHover(index){
       this.bgHover != index;
+      this.bgHover = '';
     },
     spanHover (index) {
       this.colorHover = index;
+      
     },
     divHover (index) {
       this.bgHover = index;
   width: 100%;
   .title {
     width: 100%;
-    height: 760px;
-
+    min-width: 1260px;
+    height: 90%;
+    background: url('../../../assets/image/program/bannerbg.png') no-repeat center;
+    background-size: 100% 100%;
     // border-radius: 0 0 200% 200%;
     opacity: 1 !important;
     color: #fff;
     position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     .cover-bg {
       position: absolute;
       top: 0;
 
     .tit {
       font-size: 64px;
-      padding-top: 220px;
+      // padding-top: 20%;
       font-weight: 100;
       line-height: 100px;
     }
 
   .solution-main {
     width: 100%;
-    margin-top: -55px;
+    min-width: 1260px;
+    margin-top: -4%;
     .tab-bar {
       height: 110px;
       margin: 0 auto;
       font-size: 16px;
     }
   }
-}
-.el-tabs__content{
-  
 }
 </style>