diff --git a/src/assets/images/1723156589-image.png b/src/assets/images/1723156589-image.png
index 12ec313..b84f44a 100644
Binary files a/src/assets/images/1723156589-image.png and b/src/assets/images/1723156589-image.png differ
diff --git a/src/assets/images/21bc66fba04ca35e7640b1cb1d5d7e4.png b/src/assets/images/21bc66fba04ca35e7640b1cb1d5d7e4.png
index c7d3f01..7e9d2f0 100644
Binary files a/src/assets/images/21bc66fba04ca35e7640b1cb1d5d7e4.png and b/src/assets/images/21bc66fba04ca35e7640b1cb1d5d7e4.png differ
diff --git a/src/assets/images/aiPic.png b/src/assets/images/aiPic.png
index 989c5a8..be203a6 100644
Binary files a/src/assets/images/aiPic.png and b/src/assets/images/aiPic.png differ
diff --git a/src/assets/images/aiVideo1.png b/src/assets/images/aiVideo1.png
index 815bfa2..5a4cf48 100644
Binary files a/src/assets/images/aiVideo1.png and b/src/assets/images/aiVideo1.png differ
diff --git a/src/assets/images/aiVideo2.png b/src/assets/images/aiVideo2.png
index 594b581..fa53aec 100644
Binary files a/src/assets/images/aiVideo2.png and b/src/assets/images/aiVideo2.png differ
diff --git a/src/assets/images/aiVideo3.png b/src/assets/images/aiVideo3.png
index 2f68c9d..dfce507 100644
Binary files a/src/assets/images/aiVideo3.png and b/src/assets/images/aiVideo3.png differ
diff --git a/src/assets/images/f1001.png b/src/assets/images/f1001.png
index ef31085..7376ad2 100644
Binary files a/src/assets/images/f1001.png and b/src/assets/images/f1001.png differ
diff --git a/src/assets/images/f10010.png b/src/assets/images/f10010.png
index f9ab768..2b5e1dd 100644
Binary files a/src/assets/images/f10010.png and b/src/assets/images/f10010.png differ
diff --git a/src/assets/images/f10011.png b/src/assets/images/f10011.png
index 0af66d5..78ead06 100644
Binary files a/src/assets/images/f10011.png and b/src/assets/images/f10011.png differ
diff --git a/src/assets/images/f10015.png b/src/assets/images/f10015.png
index 31fa3ac..382ea68 100644
Binary files a/src/assets/images/f10015.png and b/src/assets/images/f10015.png differ
diff --git a/src/assets/images/f10016.png b/src/assets/images/f10016.png
index 3149666..d81e9dc 100644
Binary files a/src/assets/images/f10016.png and b/src/assets/images/f10016.png differ
diff --git a/src/assets/images/f10017.png b/src/assets/images/f10017.png
index 91022e1..ca42826 100644
Binary files a/src/assets/images/f10017.png and b/src/assets/images/f10017.png differ
diff --git a/src/assets/images/f10018.png b/src/assets/images/f10018.png
index 3a60acb..1f30c4a 100644
Binary files a/src/assets/images/f10018.png and b/src/assets/images/f10018.png differ
diff --git a/src/assets/images/f10019.png b/src/assets/images/f10019.png
index 9b2de65..b10e5cf 100644
Binary files a/src/assets/images/f10019.png and b/src/assets/images/f10019.png differ
diff --git a/src/assets/images/f1002.png b/src/assets/images/f1002.png
index 2c97c5e..7f9331a 100644
Binary files a/src/assets/images/f1002.png and b/src/assets/images/f1002.png differ
diff --git a/src/assets/images/f10020.png b/src/assets/images/f10020.png
index bdf9690..c63c647 100644
Binary files a/src/assets/images/f10020.png and b/src/assets/images/f10020.png differ
diff --git a/src/assets/images/f10021.png b/src/assets/images/f10021.png
index 29f527e..b0e36d4 100644
Binary files a/src/assets/images/f10021.png and b/src/assets/images/f10021.png differ
diff --git a/src/assets/images/f10022.png b/src/assets/images/f10022.png
index 432eae6..5f0c1b3 100644
Binary files a/src/assets/images/f10022.png and b/src/assets/images/f10022.png differ
diff --git a/src/assets/images/f10023.png b/src/assets/images/f10023.png
index 126f40f..760f6ac 100644
Binary files a/src/assets/images/f10023.png and b/src/assets/images/f10023.png differ
diff --git a/src/assets/images/f10024.png b/src/assets/images/f10024.png
index 23736fc..8304f2b 100644
Binary files a/src/assets/images/f10024.png and b/src/assets/images/f10024.png differ
diff --git a/src/assets/images/f10025.png b/src/assets/images/f10025.png
index 3ef3027..7fe2dc7 100644
Binary files a/src/assets/images/f10025.png and b/src/assets/images/f10025.png differ
diff --git a/src/assets/images/f10026.png b/src/assets/images/f10026.png
index 181445a..db13f15 100644
Binary files a/src/assets/images/f10026.png and b/src/assets/images/f10026.png differ
diff --git a/src/assets/images/f1003.png b/src/assets/images/f1003.png
index 2c97c5e..f250a70 100644
Binary files a/src/assets/images/f1003.png and b/src/assets/images/f1003.png differ
diff --git a/src/assets/images/f2001.png b/src/assets/images/f2001.png
index 59b54de..719f245 100644
Binary files a/src/assets/images/f2001.png and b/src/assets/images/f2001.png differ
diff --git a/src/assets/images/f2002.png b/src/assets/images/f2002.png
index dda2fa9..1f6ff5b 100644
Binary files a/src/assets/images/f2002.png and b/src/assets/images/f2002.png differ
diff --git a/src/assets/images/f2004.png b/src/assets/images/f2004.png
index b99ce0b..9e11140 100644
Binary files a/src/assets/images/f2004.png and b/src/assets/images/f2004.png differ
diff --git a/src/assets/images/f4013.png b/src/assets/images/f4013.png
index 90a4d7d..e60e9e0 100644
Binary files a/src/assets/images/f4013.png and b/src/assets/images/f4013.png differ
diff --git a/src/assets/images/gaodingAi.png b/src/assets/images/gaodingAi.png
index dc6f0db..b597546 100644
Binary files a/src/assets/images/gaodingAi.png and b/src/assets/images/gaodingAi.png differ
diff --git a/src/assets/images/huoshan.png b/src/assets/images/huoshan.png
index 89f2400..6bd7bca 100644
Binary files a/src/assets/images/huoshan.png and b/src/assets/images/huoshan.png differ
diff --git a/src/assets/images/音乐 - 快捷方式.lnk b/src/assets/images/音乐 - 快捷方式.lnk
new file mode 100644
index 0000000..ed290c3
Binary files /dev/null and b/src/assets/images/音乐 - 快捷方式.lnk differ
diff --git a/src/assets/styles/dialog.scss b/src/assets/styles/dialog.scss
index 57b0ef4..14b9103 100644
--- a/src/assets/styles/dialog.scss
+++ b/src/assets/styles/dialog.scss
@@ -2,17 +2,29 @@
   p{
     color:black !important;
   }
+  // img{
+  //   max-width: 900px;
+  //   max-height: 400px;
+  // }
     // box-shadow: none !important;
     // border: 1px solid #e5e5e5;
     border-radius: 5px;
+    .el-dialog__headerbtn{
+      top:2px;
+      .el-dialog__close{
+        color: #FFFFFF;
+      }
+    }
     &:not(.is-fullscreen) {
       // margin-top: 36vh !important;
       // margin-left: 26vh;
     }
     .el-dialog__header {
       background: linear-gradient(-90deg, #2c04c9 0%, #5197ff 100%);
-      border-radius: 5px 5px 0px 0px;
+      // border-radius: 5px 5px 0px 0px;
       margin-right: 0px;
+      padding-bottom:0px;
+      padding: 15px 15px;
       .el-dialog__title {
         font-size: 18px;
         font-family: Source Han Sans CN;
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index e459338..3dfb59b 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -197,7 +197,12 @@ aside {
   border-radius: 10px;
   padding: 25px;
 }
-
+.app-container3 {
+  margin: 10px;
+  box-shadow: 0px 0px 13px 0px #0452C6;
+  border-radius: 10px;
+  padding: 25px 25px 3px;
+}
 .dialog-footer {
   text-align: center;
 
@@ -228,7 +233,17 @@ aside {
 .app-container2 {
   margin: 10px;
   // box-shadow: 0px 0px 13px 0px #0452C6;
+  // background: #FFFFFF;
+  border-radius: 10px;
+  padding: 10px;
+  // padding: 25px 25px 10px 25px;
+}
+.app-container4 {
+  margin: 10px;
+  // box-shadow: 0px 0px 13px 0px #0452C6;
+  background: #FFFFFF;
   border-radius: 10px;
+  padding: 10px;
   // padding: 25px 25px 10px 25px;
 }
 
diff --git a/src/views/components/popModal.vue b/src/views/components/popModal.vue
index 2a7c7a3..0344ea1 100644
--- a/src/views/components/popModal.vue
+++ b/src/views/components/popModal.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog :title="title" style="width: 1308px; height: 838px" custom-class="dialog" v-model="props.showModel" :before-close="close">
+    <el-dialog :title="title" style="width: 1308px; height: 838px" custom-class="gdialog" v-model="props.showModel" :before-close="close">
       <div class="diaMain" style="margin-top: -35px; padding: 10px; padding-left: 20px">
         <el-scrollbar height="730px">
           <slot name="content" class="main"></slot>
@@ -57,42 +57,6 @@ const submit = () => {
     font-size: 15px;
   }
 }
-.dialog {
-  border-radius: 12px;
-  .el-dialog__header {
-    background: url("@/assets/images/szjj/弹窗标题.png") !important;
-    background-size: 100% 100% !important;
-    margin-right: 0 !important;
-    span {
-      font-size: 14px;
-      font-weight: 400;
-      color: #ffffff;
-    }
-  }
-  .el-dialog__headerbtn {
-    top: 8px !important;
-    background: url("@/assets/images/szjj/关闭2.png") no-repeat;
-    background-size: 100% 100% !important;
-    width: 16px;
-    height: 16px;
-    margin-right: 15px;
-    margin-top: 7px;
-  }
-  .el-dialog__headerbtn i {
-    content: "1";
-    font-size: 13px;
-    visibility: hidden;
-  }
-  .el-dialog__footer {
-    text-align: center;
-  }
-  .tj {
-    color: #ffffff;
-  }
-  .cxks {
-    background: url("@/assets/images/szjj/重新开始.png") no-repeat;
-  }
-}
 p {
   // color: #1d2528 !important;
 }
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue b/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue
index 59729b5..2a18bca 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue
@@ -1,9 +1,9 @@
 <template>
- <div class="app-container2">
+ <div class="app-container4">
   <div class="img-centent">
     <div class="left" style=" width: 100%" >
       
-      <el-scrollbar height="610px" style="height:94%">
+      <el-scrollbar height="640px" style="height:94%;padding: 0 15px;">
         <el-row>
             <el-col :span="24">
               <div class="title-back">
@@ -13,7 +13,7 @@
           </el-row>
         <div>
          
-          <p style="color:#FFFFFF">
+          <p>
             小张去东北旅游，看到了很多以前没见过的植物，于是使用手机中拍照识图类APP识别自己所看到的植物，其中有以下两张鸢尾花的照片，<br />
             APP准确识别出了这是变色鸢尾和山鸢尾，他想知道手机APP是怎么做到如此精准的识别的，接下来，我们就带他体验其中的原理吧。
           </p>
@@ -30,7 +30,7 @@
               <div class="Step-item">步骤二</div>
               <span>特征提取</span>
             </div>
-            <p class="a" style="color:#FFFFFF">{{ item.stemContent }}</p>
+            <p class="a">{{ item.stemContent }}</p>
             <p>
               <el-radio
                 label="两张图片花的颜色不同"
@@ -73,26 +73,26 @@
               <div class="Step-item">步骤三</div>
               <span>训练分类器</span>
             </div>
-            <p style="color:#FFFFFF">
+            <p>
               假设我们根据上述特征区分出了变色鸢尾和山鸢尾，我们把特征进行量化，假设测量得到一朵鸢尾花的花瓣长度为1.1cm，宽度为0.1cm，那么这朵鸢尾花的特征就可以用（1.1,0.1）表示,<br />我们表示在直角坐标系中，就可以是直角坐标系中的一个点。如下：
             </p>
             <img src="@/assets/images/szjj/setpt1.png" alt="" />
-            <p style="color:#FFFFFF">
+            <p>
               那么我们可以想象这样一个场景，我们把大量变色鸢尾和山鸢尾的图片喂给计算机，同时输入图片的花瓣长度和宽度特征数据，并把变色鸢尾图片标注为0，把山鸢尾图片标注为1，山鸢尾用黑色的点表示，变色鸢尾<br />用白色的点表示，那么我们可以训练出一个分类器。
             </p>
             <span class="btn"> 分类器训练</span>
             <p><img src="@/assets/images/szjj/setpt2.png" alt="" /></p>
-            <p style="color:#FFFFFF">
+            <p>
               这是一个简单的分类，当我们用数据对分类器进行了训练，那么它就具备了识别能力，当训练数据量越大，特征提取的越多越精确，那么系统识别能力就越精确。
             </p>
-            <p style="color:#FFFFFF">
+            <p>
               这个时候我们上传一张鸢尾花图片，或者用手机对着鸢尾花拍照，系统就会计算花瓣的长度和宽度，然后对比系统已有的数据，看是落在线的上面还是下面，如果<br />落在线的下面则系统识别为1，即为山鸢尾。
             </p>
             <span class="btn btn1" @click="Upload" :class="{'is-disabled':Answer!==''}">上传鸢尾花图片</span
             >
             <p><img :src="getAssetsFile(Identifyimg)" alt=""/></p>
             <p>
-              <label for="" style="color:#FFFFFF">系统识别您上传的鸢尾花为：</label>
+              <label for="">系统识别您上传的鸢尾花为：</label>
               <el-select
                 class="m-2"
                 placeholder="请选择"
@@ -539,4 +539,14 @@ div {
     }
   }
 }
+.tj{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
+}
+.cxks{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
+}
 </style>
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/Naturallanguageprocessing.vue b/src/views/digitalMarketTech/artificialIntelligence/components/Naturallanguageprocessing.vue
index abe63ae..94be67a 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/Naturallanguageprocessing.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/Naturallanguageprocessing.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container2">
+  <div class="app-container4">
     <div class="Naturallanguageprocessing">
       <div class="left">
-        <el-scrollbar height="620px" style="height: 93%">
+        <el-scrollbar height="645px" style="height: 93%;padding: 0 15px;">
           <el-row>
             <el-col :span="24">
               <div class="TaskBackground">
@@ -11,7 +11,7 @@
             </el-col>
           </el-row>
           <div class="gdialog">
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               hatGPT突然火爆，小张也去了解了ChatGPT，发现ChatGPT是美国人工智能研究实验室OpenAI新推出的一种人工智能技术驱动的自然语言处理工具，使用了Transformer神经网络架构，也是GPT-3.5架构，这是一种用于处理序列数据的模型，拥有语言理解和文本生成能力，尤其是它会通过连接大量的语料库来训练模型，这些语料库包含了真实世界中的对话，使得ChatGPT具备上知天文下知地理，还能根据聊天的上下文进行互动的能力，做到与真正人类几乎无异的聊天场景进行交流。ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。如此强大的工具，背后是什么原理呢，让我们一起来看一下吧。
               <br />
               <br />
@@ -24,14 +24,14 @@
               <span>文本分词</span>
               <br />
             </div>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               中文分词(Chinese Word Segmentation)指的是将一个汉字序列切分成一个个单独的词。简单的讲，中文分词就是让计算机系统在汉语文本中的词与词之间自动加上空格或其他边界标记。
               <br />
 
               请对下面两句话进行分词，分词结果请去掉标点符号：
               <br />
             </p>
-            <p style="color: #ffffff !important">这个门把手坏了，请你来修一下。</p>
+            <p style="color: #000000 !important">这个门把手坏了，请你来修一下。</p>
             <el-row>
               <el-col :span="24">
                 <el-input v-model.trim="text1.input1" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
@@ -43,7 +43,7 @@
                 <el-input v-model.trim="text1.input7" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
               </el-col>
             </el-row>
-            <p style="color: #ffffff !important">快把手拿开，这里危险不能摸。</p>
+            <p style="color: #000000 !important">快把手拿开，这里危险不能摸。</p>
             <el-row>
               <el-col :span="24">
                 <el-input v-model.trim="text2.input1" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
@@ -56,7 +56,7 @@
                 <el-input v-model.trim="text2.input8" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
               </el-col>
             </el-row>
-            <p style="color: #ffffff !important">请问上面两句话中“把手”有何区别？计算机是如何识别两句话中“把手”的不同含义的？</p>
+            <p style="color: #000000 !important">请问上面两句话中“把手”有何区别？计算机是如何识别两句话中“把手”的不同含义的？</p>
             <div class="answer">
               <!-- <span v-if="item.correctAnswer!==null& item.studentAnswer!==item.correctAnswer">正确答案:{{item.correctAnswer}}</span> -->
               <p><el-checkbox v-model="answer.studentAnswer" label="A" size="large" @change="answerChanged(answer, '1')">A.上面那句话中把手是名词，指门把手，用于开关门的，门把手可作为一个词</el-checkbox></p>
@@ -72,12 +72,12 @@
               <span>词性标注</span>
               <br />
             </div>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               根据上一步文本分词相关知识，我们知道中文中同样一个词在不同的句子，不同的上下文环境中有不同的含义，因此要结合上下文进行词性标注，词性标注是自然语言处理
               <br />
               中一项非常重要的基础性工作，词性标注主要被应用于文本挖掘（text mining）和NLP领域，是各类基于文本的机器学习任务，例如语义分析等的预处理步骤。
             </p>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               请对下面两句话进行词性标注:
               <br />
               <br />
@@ -103,7 +103,7 @@
               <span>文本摘要</span>
               <br />
             </div>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               对于长文本的文本总结，在信息快速膨胀的时代尤其有意义，如对每日新闻的自动总结可以快速为我们提供有效的信息。文本总结模型有两种可用的方法，一种是摘要式的方法，即从 语义方面提供更加简单精炼的总结；另一种是抽取式的方法，即通过对原文中的关键语句进行重新排列，最大限度地提炼原文的主要信息。抽取式的方法不需要人工标注和训练，因此 更加简单明了。
               <br />
               请针对下面这段文字进行总结，撰写100字以内的摘要，再点击自动生成摘要，跟自己撰写的摘要对比下，体验下AI的强大功能吧。
@@ -140,7 +140,7 @@
               <span>词云</span>
               <br />
             </div>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               词云主要提供了一种观察社交媒体网站上的热门话题或搜索关键字的一种方式，它可以对网络文本中出现频率较高的“关键词”予以视觉上的突出，形成“关键词云层”或“关键词渲染”，从而过滤掉大量的文本信息，使浏览网页者只要一眼扫过文本就可以领略文本的主旨。
               <br />
               <br />
@@ -712,7 +712,7 @@ onBeforeUnmount(() => {
       }
       span {
         font-size: 15px;
-        color: #ffffff;
+        color: #000000;
         font-weight: 600;
       }
     }
@@ -800,7 +800,14 @@ onBeforeUnmount(() => {
 .dialog-footer {
   margin-top: 5px;
 }
-.tj {
-  --el-button-hover-text-color: #000000;
+.tj{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
+}
+.cxks{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
 }
 </style>
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/Robot-learning.vue b/src/views/digitalMarketTech/artificialIntelligence/components/Robot-learning.vue
index 8705492..477bb3a 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/Robot-learning.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/Robot-learning.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container2">
+  <div class="app-container4">
     <div class="Robot-learning">
       <div class="left">
         <div class="gdialog">
-          <el-scrollbar height="620px" style="height: 93%">
+          <el-scrollbar height="645px" style="height: 93%;padding: 0 15px;">
             <el-row>
               <el-col :span="24">
                 <div class="TaskBackground">
@@ -11,7 +11,7 @@
                 </div>
               </el-col>
             </el-row>
-            <p style="color: #ffffff !important">假设我们要构建一个决策树来预测一个人是否会购买某个产品。我们将使用以下特征来进行预测：</p>
+            <p style="color: #000000 !important">假设我们要构建一个决策树来预测一个人是否会购买某个产品。我们将使用以下特征来进行预测：</p>
             <p class="info">
               <img src="@/assets/images/szjj/年龄.png" />
               年龄：年龄范围在18岁到65岁之间
@@ -24,7 +24,7 @@
               <img src="@/assets/images/szjj/收入.png" />
               收入：收入范围在0到100,000之间
             </p>
-            <p style="color: #ffffff !important">我们有一个包含以下数据的训练集：</p>
+            <p style="color: #000000 !important">我们有一个包含以下数据的训练集：</p>
             <div class="tabback">
               <el-table :data="TrainingSet" style="width: 100%" stripe>
                 <el-table-column type="index" label="编号" align="center" width="150" />
@@ -34,7 +34,7 @@
                 <el-table-column prop="purchase" label="购买" align="center" />
               </el-table>
             </div>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               现在，我们将使用这些数据来构建一个决策树模型。
               <br />
               我们可以使用信息增益或基尼不纯度等指标来选择最佳特征。在这个例子中，我们选择使用信息增益。计算结果显示应该选择性别作为根节点。
@@ -44,8 +44,6 @@
               <br />
               对于男性子集：
             </p>
-            <span>{{ MaleSubset }}111</span>
-
             <div class="tabback tab2">
               <el-table :data="MaleSubset" style="width: 100%" stripe>
                 <el-table-column type="index" label="编号" align="center" width="150" />
@@ -67,7 +65,7 @@
               </el-table>
             </div>
             <el-button @click="segmentation(MaleSubset, 1, '男')" class="LeftbuttonS">分割</el-button>
-            <p style="color: #ffffff !important">对于女性子集：</p>
+            <p style="color: #000000 !important">对于女性子集：</p>
             <div class="tabback tab2">
               <el-table :data="FemaleSubset" style="width: 100%" stripe>
                 <el-table-column type="index" label="编号" align="center" width="150" />
@@ -89,7 +87,7 @@
               </el-table>
             </div>
             <el-button @click="segmentation(FemaleSubset, 2, '女')" :disabled="state < 2" class="LeftbuttonS">分割</el-button>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               对于男性子集，我们可以看到购买的结果是"是"和"否"都有，所以我们需要进一步划分。我们选择年龄作为下一个节点。
               <br />
               对于年龄的取值（小于等于30岁和大于30岁）：
@@ -112,7 +110,7 @@
               </el-table>
             </div>
             <el-button @click="divide(greaterThan, 3)" :disabled="state < 3" class="LeftbuttonS">分割</el-button>
-            <p style="color: #ffffff !important">对于大于30岁的子集：</p>
+            <p style="color: #000000 !important">对于大于30岁的子集：</p>
             <div class="tabback tab3">
               <el-table :data="lessThan" style="width: 100%" stripe>
                 <el-table-column type="index" label="编号" align="center" width="150" />
@@ -129,7 +127,7 @@
               </el-table>
             </div>
             <el-button @click="divide(lessThan, 4)" :disabled="state < 4" class="LeftbuttonS">分割</el-button>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               对于小于等于30岁的子集，购买的结果都是"否"，所以我们不需要再进行划分。
               <br />
               对于大于30岁的子集，购买的结果都是"是"，所以我们不需要再进行划分。
@@ -189,7 +187,7 @@
                 </div>
               </div>
             </div>
-            <p style="color: #ffffff !important">
+            <p style="color: #000000 !important">
               上述例子是决策树相关的一个简单案例，实际中决策树可以用于金融领域的精准营销，利用大数据建模，分析客户年龄、收入、职业、历史信贷记录等信息，锁定哪些客户群里更有可能发生信贷风险，
               <br />
               哪些属于优质客户，更可能购买产品和服务等。
@@ -725,7 +723,7 @@ onMounted(() => {
     .info {
       display: flex;
       align-items: center;
-      color: #ffffff !important;
+      color: #000000 !important;
       img {
         margin-right: 10px;
       }
@@ -933,7 +931,14 @@ onMounted(() => {
     }
   }
 }
-.tj {
-  --el-button-hover-text-color: #000000;
+.tj{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
+}
+.cxks{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
 }
 </style>
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/article-identification.vue b/src/views/digitalMarketTech/artificialIntelligence/components/article-identification.vue
index f4e5fe3..ea94d4a 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/article-identification.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/article-identification.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container2">
+  <div class="app-container4">
     <div class="text-centent">
     <div class="left">
      
-      <el-scrollbar height="625px" style="height:94%">
+      <el-scrollbar height="640px" style="height:94%;padding: 0 15px;">
         <el-row>
       <el-col :span="24">
         <div class="title-back">
@@ -11,7 +11,7 @@
         </div>
       </el-col>
     </el-row>
-    <p style="color:#FFFFFF">
+    <p>
       小张在写期末课程小论文的时候，上网查资料发现一篇文章特别有参考价值，但是这篇文章无法复制，小张要怎么做才能获得这篇文章的电子版呢？
     </p>
     <div class="Step" v-for="item in Step1" :key="item">
@@ -59,7 +59,7 @@
       </el-scrollbar>
       <div class="dialog-footer" style="margin-top:5px">
             <el-button  type="primary" class="tj"  size="large"  @click="submit">提交任务</el-button>
-            <el-button  type="primary" size="large" @click='reStart'>重新开始</el-button> 
+            <el-button  type="primary" class="cxks" size="large" @click='reStart'>重新开始</el-button> 
       </div>
     </div>
     <div class="right">
@@ -322,7 +322,7 @@ div {
       font-size: 15px;
       font-family: Source Han Sans CN;
       font-weight: 600;
-      color: #FFFFFF;
+      color: #000000;
     }
     }
    
@@ -388,6 +388,13 @@ div {
   // }
 }
 .tj{
-  --el-button-hover-text-color:#000000;
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
+}
+.cxks{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
 }
 </style>
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/face-recognition.vue b/src/views/digitalMarketTech/artificialIntelligence/components/face-recognition.vue
index 37686ea..84835d7 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/face-recognition.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/face-recognition.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container2">
+  <div class="app-container4">
     <div class="Face-recognition">
  <div class="left">
   
-  <el-scrollbar height="620px" style="height:94%">
+  <el-scrollbar height="650px" style="height:94%;padding: 0 15px;">
     <el-row>
       <el-col :span="24">
         <div class="title-back">
@@ -11,7 +11,7 @@
         </div>
       </el-col>
     </el-row>
-    <div style="width: calc(100% - 216px);color:#FFFFFF">
+    <div style="width: calc(100% - 216px);color:#000000">
     <p >
       小张假期和几个朋友一起出去旅游，旅途很开心，也拍了很多照片，小张想挑出包含自己的照片，可面对那么多照片犯了难，突然他想到了手机相册里的自动分类功能，<br />
       可以把某个人识别出来自动建一个相册，解决问题的同时，他对这个功能背后的原理产生了兴趣，接下来跟着小张一起探究背后的原理吧。
@@ -82,7 +82,7 @@
   </el-scrollbar>
   <div class="dialog-footer">
         <el-button type="primary" class="tj" plain  size="large"  @click="submit">提交任务</el-button>
-        <el-button type="primary" class="tj" plain  size="large"  @click="restart">重新开始</el-button>
+        <el-button type="primary" class="cxks" plain  size="large"  @click="restart">重新开始</el-button>
   </div>
  </div>
  <div class="right">
@@ -643,7 +643,14 @@ getList()
     margin-top: 32px;
 }
 .tj{
-  --el-button-hover-text-color:#000000;
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
+}
+.cxks{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
 }
 </style>
  
\ No newline at end of file
diff --git a/src/views/digitalMarketTech/artificialIntelligence/components/voice-technology.vue b/src/views/digitalMarketTech/artificialIntelligence/components/voice-technology.vue
index 7e3d00b..958f7ef 100644
--- a/src/views/digitalMarketTech/artificialIntelligence/components/voice-technology.vue
+++ b/src/views/digitalMarketTech/artificialIntelligence/components/voice-technology.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container2">
+  <div class="app-container4">
     <div class="voice-technology">
     <div class="left">
-      <el-scrollbar height="620px" style="height: 93%;">
+      <el-scrollbar height="640px" style="height: 93%;padding: 0 15px;">
         <el-row>
           <el-col :span="24">
             <div class="TaskBackground">
@@ -11,7 +11,7 @@
           </el-col>
         </el-row>
       <div style="width: calc(100% - 186px);">
-        <p style="color:#FFFFFF">
+        <p>
           小张临近期末复习，突然手受伤了，写字打字都不是太方便，小张很着急，如何高效复习呢？小张在使用微信发语音过程中，突然想到了可以利用语音技术帮助自己<br />
           复习备考，于是他网购了当下流行的小度智能屏，复习过程中遇到不懂的就问小度，重点知识还用手机进行了录音并转成文字整理到一起，大大减少了写字打字的工作量，让我们一起来看看语音技术是如何帮助我们<br />高效学习的吧
         </p>
@@ -62,7 +62,7 @@
           >
         </div>
         <p>
-          <span style="font-weight: 600; font-size: 14px; color: #FFFFFF"
+          <span style="font-weight: 600; font-size: 14px; color: #000000"
             >2.1 语音信号采集</span
           ><br />小度可以通过内置麦克风设备，把小张的语音信号转化为电信号，请选择以下哪个最有可能是“小度小度”的语音信号
         </p>
@@ -108,7 +108,7 @@
           我们可以想象经过特征提取后，计算机系统确定了每个字的读音特征，并把特征进行数字化向量化。我们想象用一个图形象化展示每个字的语音特征。
         </p>
         <p>
-          <span style="font-weight: 600; font-size: 14px; color: #FFFFFF"
+          <span style="font-weight: 600; font-size: 14px; color: #000000"
             >2.2 预处理及特征提取</span
           ><br />
           在一项语音识别任务中，我们需要做的第一件事就是数据预处理，不论是开源数据集还是业务数据集，在送入模型真正训练之前必不可少的一步就是将纷繁冗杂的数据整理成特定的文件格式并处理成计算机可识别的二进制特征向量形式储存在指定文件夹下。<br />
@@ -157,7 +157,7 @@
           />
         </div>
         <p>
-          <span style="font-weight: 600; font-size: 14px; color: #FFFFFF"
+          <span style="font-weight: 600; font-size: 14px; color: #000000"
             >2.3 声学模型</span
           ><br />
           声学模型相当于一个大字典，记录了每个字的发音特征，系统自动计算需要识别的语音每个字的语音特征与库里哪个字的发音匹配度最高，一般一个字可能匹配到库里1-3个匹配度最高的字符
@@ -169,7 +169,7 @@
         </p>
         <canvas width="632px" height="134px" ref="scatterCanvas"></canvas>
         <p>
-          <span style="font-weight: 600; font-size: 14px; color: #FFFFFF"
+          <span style="font-weight: 600; font-size: 14px; color: #000000"
             >2.4 语言模型与语言处理</span
           ><br />
           系统识别出匹配度最高的字符之后，需要把识别出的字组成一句话，这就需要语言模型与语言处理，根据语义结构、语法规则、语言的数学描述模型，结合<br />
@@ -195,7 +195,7 @@
           >
         </div>
         <p>
-          <span style="font-weight: 600; font-size: 14px; color: #FFFFFF"
+          <span style="font-weight: 600; font-size: 14px; color: #000000"
             >3.1 语言处理</span
           >：模拟人对自然语言的理解过程——文本规整、词的切分、语法分析和语义分析，使计算机能够完全理解文本，并给出所需要的发音提示。这相当于去<br /><br />
           库里根据文字字符去找对应的发音。汉语按音素的发音特征分类分为辅音、单元音、复元音、复鼻尾音四种，按音节结构分类为声母和韵母。并且由音素构成声母或韵母。有时，将含有声调的韵母称为调母。由单个调母或由声母与调母拼音成为音节。汉语的一个音节就是汉语一个字的音，即音节字。由音节字构成词，最后再由词构成句子。<br /><br />请标出以下文字的拼音：
@@ -212,7 +212,7 @@
           </div>
         </div>
         <p>
-          <span style="font-weight: 600; font-size: 14px; color: #FFFFFF"
+          <span style="font-weight: 600; font-size: 14px; color: #000000"
             >3.2 韵律处理</span
           >：为合成语音规划出音段特征，如高音、音长和音强等，使合成语音能正确表达语意，听起来更加自然。<br />
           比如发音不标准的外国人讲汉语，虽然每个字都不算完全读错，但是整体听起来会觉得一时理解不了，没法正确表达语意，这就是因为声调、读音等的不同导致的。<br /><br />
@@ -250,7 +250,7 @@
           ></audio>
         </p>
         <p>
-          <span style="font-weight: 600; font-size: 14px; color: #FFFFFF"
+          <span style="font-weight: 600; font-size: 14px; color: #000000"
             >3.3 声学处理</span
           >：根据前两部分处理结果的要求输出语音，即合成语音。现在的语音合成可以让用户选择采用男声或者女声，是要欢快的，大气的，温情的等等各种风格，<br /><br />
           合成的语音也越来越接近人的自然表达。<br /><br />
@@ -273,14 +273,14 @@
             @change="synthesischange"
           />
         </p>
-        <p style="color:#FFFFFF" class="dub" v-if="synthesisradio == '男声' && Load == 100">
+        <p class="dub" v-if="synthesisradio == '男声' && Load == 100">
           <audio
             id="audio"
             src="https://szjj.sztzjy.com:97/ttsmaker-file-2024-3-11-10-38-32.mp3"
             controls
           ></audio>
         </p>
-        <p style="color:#FFFFFF" class="dub" v-if="synthesisradio == '女声' && Load == 100">
+        <p class="dub" v-if="synthesisradio == '女声' && Load == 100">
           <audio
             id="audio"
             src="https://szjj.sztzjy.com:97/ttsmaker-file-2024-3-11-10-39-46.mp3"
@@ -855,7 +855,7 @@ onMounted(()=>{
     position: relative;
     // width: calc(100% - 216px);
     p{
-      color: #FFFFFF;
+      color: #000000;
     }
   }
   .right {
@@ -917,7 +917,7 @@ onMounted(()=>{
       }
       span {
         font-size: 15px;
-        color: #FFFFFF;
+        color: #000000;
         // color: var(--color);
         font-weight: 600;
       }
@@ -1062,10 +1062,17 @@ canvas,
 }
 .tsColor{
   .el-radio{
-  color: #FFFFFF;
+  color: #000000;
 }
 }
 .tj{
-  --el-button-hover-text-color:#000000;
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
+}
+.cxks{
+  width: 136px;
+    height: 40px;
+    color: #000000 !important;
 }
 </style>
diff --git a/src/views/digitalMarketTech/bigData/components/HadoopHDFS.vue b/src/views/digitalMarketTech/bigData/components/HadoopHDFS.vue
index 7861453..ef54289 100644
--- a/src/views/digitalMarketTech/bigData/components/HadoopHDFS.vue
+++ b/src/views/digitalMarketTech/bigData/components/HadoopHDFS.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="app-container">
+  <div class="app-container4" style="padding: 10px 10px 15px;">
     <div class="HadoophDFS">
     <div class="left">
-      <el-scrollbar height="610px" style="height:96%">
+      <el-scrollbar height="640px" style="height:96%;padding: 0 20px;">
         <p>
           本案例通过搭建服务器集群，安装Hadoop组件，实训演练Hadoop的核心组件HDFS分布式文件系统的读、写流程和原理
         </p>
-        <span style="color:#FFFFFF">1、搭建服务器集群，为每个机架配置三台服务器，建立通信联系</span>
+        <span>1、搭建服务器集群，为每个机架配置三台服务器，建立通信联系</span>
         <div class="Server">
           <div class="Server-item">
             <div class="item-img" style="cursor: pointer;" @click="clientSelect(2)">
@@ -69,7 +69,7 @@
           </div>
         </div>
         <el-divider />
-        <span style="color:#FFFFFF"
+        <span
           >2、搭建Hadoop，设置名字节点（NameNode）、数据节点（DataNode）</span
         >
         <div class="Server ts">
@@ -224,7 +224,7 @@
           </el-select>
         </div>
         <el-divider />
-        <span style="color:#FFFFFF"
+        <span
           >3、目前需要上传一个500M的文件File，HDFS系统中的客户端Client，需要将其拆分为128M的文件块。</span
         >
         <p style="font-weight: 500 !important;color:#FFFFFF">
@@ -258,7 +258,7 @@
           </div>
         </div>
         <el-divider />
-        <span style="color:#FFFFFF"
+        <span
           >4、客户端Client通过Distributed
           FileSystem模块向与名字节点（NameNode）建立通信联系，包括是否可以上传文件，存放的文件目录。</span
         >
@@ -417,7 +417,7 @@
           </div>
         </div>
         <el-divider />
-        <span style="color:#FFFFFF"
+        <span
           >5、客户端通过FSDataOutputStream模块请求DataNode1上传数据，DataNode1收到请求会继续调用DataNode2，然后DataNode2调用DataNode3，<br />将这个通信管道建立完成。DataNode1、DataNode2、DataNode3逐级应答客户端。</span
         >
         <div class="Server_five ts">
@@ -553,7 +553,7 @@
           </div>
         </div>
         <el-divider />
-        <span style="color:#FFFFFF"
+        <span
           >6、客户端开始往DataNode1上传第一个Block1（先从磁盘读取数据放到一个本地内存缓存），以Packet为单,DataNode1收到一个Packet就会<br />传给DataNode2，DataNode2传给DataNode3；DataNode1每传一个packet会放入一个应答队列等待应答。</span
         >
         <div class="Server_five ts">
@@ -627,7 +627,7 @@
           </div>
         </div>
         <el-divider />
-        <span style="color:#FFFFFF"
+        <span
           >7、当第一个Block1传输完成之后，客户端再次请求NameNode上传第二个Block2、Block3、Block4到相应的服务器。<br />（重复执行4--6步）。数据读写完毕，告知NameNode，记录元数据</span
         >
         <div style="display: flex">
@@ -706,8 +706,8 @@
           </div>
         </div>
         <el-divider />
-        <span style="color:#FFFFFF">8、当从HDFS读出数据时候，遵循以下步骤：</span>
-        <p style="color:#FFFFFF">步骤①: Client向NameNode发送信息，告知NameNode自己想读取哪一份文件<br />
+        <span >8、当从HDFS读出数据时候，遵循以下步骤：</span>
+        <p>步骤①: Client向NameNode发送信息，告知NameNode自己想读取哪一份文件<br />
           步骤②: NameNode查找自身存下来的元数据（meta data）。为Client生成一张清单消息，这个消息包括：<br/>
           待读取的文件在集群上所有的block信息。<br />
           每一个block信息的副本所存放的DataNode的ip地址（有3个副本就有3个DataNode）。同时对这3个地址，按照其和Client的距离排好序。<br />
@@ -805,18 +805,20 @@
             <p>Block4：{{value7}}，{{value8}}，{{value9}}</p>
           </div>
           </div>
-          
-      </el-scrollbar>
-      <div class="dialog-footer">
+          <div class="right">
+      <span @click="hadoophdfsDialogVisible = true"></span>
+    </div>
+        </el-scrollbar>
+      <div class="dialog-footer" style="margin-bottom: 5px;">
         <el-button @click="sendTitle()" class="tj">提交任务</el-button>
         <el-button type="primary" @click="resultShow" class="cxks">
             重新开始
         </el-button>
       </div>
     </div>
-    <div class="right">
+    <!-- <div class="right">
       <span @click="hadoophdfsDialogVisible = true"></span>
-    </div>
+    </div> -->
     <el-dialog
       custom-class="gdialog"
       v-model="hadoophdfsDialogVisible"
@@ -1427,16 +1429,19 @@ const resultShow=()=>{
 p {
   font-size: 15px;
   line-height: 20px;
-  color: #FFFFFF;
+  color: #000000;
   // font-weight: 600;
 }
 .HadoophDFS {
   display: flex;
   .left {
-    width: calc(100% - 216px);
+    width: calc(100%);
     // height: 100%;
   }
   .right {
+    position: absolute;
+    top: 35px;
+    right: 30px;
     width: 216px;
     padding-left: 60px;
     span {
@@ -1467,7 +1472,7 @@ p {
       grid-template-columns: repeat(3, 1fr);
       justify-content: center;
       grid-gap: 91px;
-      width: calc(100% - 47%);
+      width: calc(100% - 57%);
       height: 368px;
       margin: 10px 0px 40px 0px;
       padding: 0px 73px;
@@ -1643,7 +1648,7 @@ p {
       grid-template-columns: repeat(3, 1fr);
       justify-content: center;
       grid-gap: 91px;
-      width: calc(100% - 47%);
+      width: calc(100% - 57%);
       height: 368px;
       margin: 10px 0px 40px 0px;
       padding: 0px 73px;
@@ -1912,7 +1917,7 @@ p {
       grid-template-columns: repeat(3, 1fr);
       justify-content: center;
       grid-gap: 0px;
-      width: calc(100% - 50%);
+      width: calc(100% - 57%);
       height: 445px;
       margin: 10px 0px 50px 0px;
       padding: 0px 10px;
@@ -2185,7 +2190,7 @@ p {
     width: 84px;
     height: 25px;
     top: 208px;
-    left: 200px;
+    left: 186px;
     background: #FFFFFF;
     cursor: pointer;
     border-radius: 5px;
@@ -2194,6 +2199,6 @@ p {
     padding: 2px;
   }
   .txPotion{
-    left: 415px;
+    left: 389px;
   }
 </style>
\ No newline at end of file
diff --git a/src/views/digitalMarketTech/bigData/components/digitalMarketing.vue b/src/views/digitalMarketTech/bigData/components/digitalMarketing.vue
index be563da..8dcc42e 100644
--- a/src/views/digitalMarketTech/bigData/components/digitalMarketing.vue
+++ b/src/views/digitalMarketTech/bigData/components/digitalMarketing.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="app-container2">
+  <div class="app-container4">
     <!-- <el-scrollbar height="650px"> -->
     <div style="width:100%">
       <div class="digital_main">
-      <el-scrollbar height="610px">
+      <el-scrollbar height="640px" style="padding: 0 20px;">
         <div class="left_main">
           <p style="font-weight: bold; font-size: 15px">
             本任务以案例数据形式，介绍Apriori算法下的实现步骤，假设有四名客户（1、2、3、4），购买了编号为A、B、C、D、E若干
@@ -18,7 +18,6 @@
             <el-table-column
               prop="name"
               label="商品"
-              width="350"
               align="center"
             >
               <template #default="scope">
@@ -1215,7 +1214,7 @@ onBeforeUnmount(() => {
   .main_right {
   }
   p{
-    color: #FFFFFF;
+    color: #000000;
   }
 }
 .imgSpan {
diff --git a/src/views/digitalMarketTech/bigData/components/hadoop.vue b/src/views/digitalMarketTech/bigData/components/hadoop.vue
index b3593ff..66ecb91 100644
--- a/src/views/digitalMarketTech/bigData/components/hadoop.vue
+++ b/src/views/digitalMarketTech/bigData/components/hadoop.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container2">
+  <div class="app-container4">
     <div class="Hadoop">
     <div class="left">
-    <el-scrollbar height="615px" style="height:93%" ref="scrollbar">
+    <el-scrollbar height="640px" style="height:93%;padding: 0 20px;" ref="scrollbar">
       <p>以下是Hadoop的技术框架图，请选择相应的组件填入其中：</p>
       <div class="Module">
         <div class="title">
@@ -554,7 +554,7 @@ echoHaop()
     font-size: 15px;
     font-family: Source Han Sans CN;
     // font-weight: 600;
-    color: #FFFFFF;
+    color: #000000;
   }
   .Module {
     position: relative;
diff --git a/src/views/digitalMarketTech/bigData/components/technologyFramework.vue b/src/views/digitalMarketTech/bigData/components/technologyFramework.vue
index 28d58ac..bdb8eed 100644
--- a/src/views/digitalMarketTech/bigData/components/technologyFramework.vue
+++ b/src/views/digitalMarketTech/bigData/components/technologyFramework.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="app-container2">
+    <div class="app-container4">
         <div class="frame">
      <div class="left">
-       <el-scrollbar height="620px" style="height:92%">
+       <el-scrollbar height="640px" style="height:92%;padding: 0 20px;">
        <div style="width: calc(100% - 216px);">
          <p class="test">大数据之所以称为大数据，因其和“小数据”比较起来，有显著的特征:</p>
        <div class="topic" v-for="(item, index) in data" :key="item">
@@ -285,7 +285,7 @@ import { getUserInfo } from '@/utils/auth'
        // font-size: 1px;
        font-family: Source Han Sans CN;
        // font-weight:600;
-       color: #FFFFFF;
+       color: #000000;
      }
      .topic {
        .setp {
@@ -306,7 +306,7 @@ import { getUserInfo } from '@/utils/auth'
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 600;
-           color: #FFFFFF;
+           color: #000000;
          }
        }
        .content{
@@ -317,7 +317,7 @@ import { getUserInfo } from '@/utils/auth'
        }
        p {
          height: 36px;
-         background: #FFFFFF;
+         background: #e9ebfc;
          border-radius: 4px;
          padding: 0px 20px;
          margin: 0px;
diff --git a/src/views/digitalMarketTech/bigData/components/whatBigData.vue b/src/views/digitalMarketTech/bigData/components/whatBigData.vue
index 55720b3..7cddf28 100644
--- a/src/views/digitalMarketTech/bigData/components/whatBigData.vue
+++ b/src/views/digitalMarketTech/bigData/components/whatBigData.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="app-container2">
+    <div class="app-container4">
         <div class="Whatbigdata">
       <div class="left">
-        <el-scrollbar height="620px">
-       <p class="test">大数据之所以称为大数据，因其和“小数据”比较起来，有显著的特征:</p>
+        <el-scrollbar height="640px">
+       <p class="test" style="margin-left:25px">大数据之所以称为大数据，因其和“小数据”比较起来，有显著的特征:</p>
       <div class="eval_main" v-for="(item, index) in mlist" :key="index" :class="['eval_main' + index]" >
           <div class="eval_main_title">
             <div class="eval_main_left">
@@ -385,7 +385,7 @@ import { getUserInfo } from '@/utils/auth'
     .rigin{
       position: absolute;
       right: 0;
-      top: 0;
+      top: 35px;
       width: 216px;
       padding-left: 60px;
       span {
@@ -401,7 +401,7 @@ import { getUserInfo } from '@/utils/auth'
       font-size: 15px;
       font-family: Source Han Sans CN;
       // font-weight: 600;
-      color: #FFFFFF;
+      color: #000000;
     }
     .topic {
       .setp {
@@ -415,7 +415,7 @@ import { getUserInfo } from '@/utils/auth'
           font-size: 12px;
           text-align: center;
           line-height: 25px;
-          color: #ffffff;
+          color: #000000;
         }
         span {
           margin-left: 8px;
@@ -444,7 +444,7 @@ import { getUserInfo } from '@/utils/auth'
       font-size: 14px;
       align-items: center;
       .eval_main_right {
-        color: #FFFFFF;
+        color: #000000;
         margin-left: 23px;
         span {
           font-size: 14px;
@@ -460,7 +460,7 @@ import { getUserInfo } from '@/utils/auth'
     width: 32px;
     height: 32px;
     background-color: #5621F8;
-    color: white;
+    color: #FFFFFF;
     border-radius: 50%;
     font-size: 13px;
     font-size: 15px;
diff --git a/src/views/digitalMarketTech/index.vue b/src/views/digitalMarketTech/index.vue
index 404834e..3af2439 100644
--- a/src/views/digitalMarketTech/index.vue
+++ b/src/views/digitalMarketTech/index.vue
@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <div class="rgzn_top app-container">
+  <div class="rgzn_top app-container3">
     <div class="top_item">
       <el-button :class="{ active: isActive === 1 }" @click="activeIndex(1)">
         <img src="@/assets/images/大数据.png" />
diff --git a/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue b/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
index 9dd5e19..8d46b86 100644
--- a/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
+++ b/src/views/digitalMarketingAlgorithms/components/associationRuleMining.vue
@@ -194,10 +194,10 @@
         </p>
         <p style="font-size: 19px; font-weight: 600">置信度（Confidence）</p>
         <p>置信度表示在包含项集X的所有事务中，也包含项集Y的事务的概率。</p>
-        <img src="@/assets/images/f2001.png" alt="" />
+        <img src="@/assets/images/f2001.png" alt="" style="width: 600px;"/>
         <p style="font-size: 19px; font-weight: 600">提升度（Lift）</p>
         <p>提升度用于衡量项集X和Y的出现是否相互独立。</p>
-        <img src="@/assets/images/f2002.png" alt="" />
+        <img src="@/assets/images/f2002.png" alt="" style="width: 600px;"/>
         <p style="font-size: 19px; font-weight: 600">Apriori原理</p>
         <p>
           Apriori原理是Apriori算法的核心，它基于一个简单但重要的观察：一个项集是频繁的，那么它的所有子集也必须是频繁的。
diff --git a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
index 53d7e31..a13cf19 100644
--- a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue
@@ -160,11 +160,14 @@
           <br />
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;聚类分析是一种探索性分析方法，与判别分析不同，聚类分析事先并不知道分类的标准，甚至不知道应该分成几类，而是会根据样本数据的特征，自动进行分类。
         </p>
-        <img src="@/assets/images/f1001.png" />
+        <img src="@/assets/images/f1001.png" style="width: 600px;height: 400px;"/>
         <p>聚类与分类的不同在于，聚类所要求划分的类是未知的</p>
-        <img src="@/assets/images/f1002.png" />
-        <img src="@/assets/images/f1003.png" />
-        <img src="@/assets/images/f1005.png" />
+        <img src="@/assets/images/f1002.png" style="width: 600px;height: 300px;"/><br />
+        <img src="@/assets/images/f1003.png" style="width: 600px;height: 300px;"/>
+        <!-- <img src="@/assets/images/f1005.png" style="width: 1100px;height: 400px;"/> -->
+        <li style="font-size:18px">从统计学的观点看，聚类分析是通过数据建模简化数据的一种方法。</li>
+        <li style="font-size:18px">从机器学习的角度看，簇相当于隐藏模式。聚类是搜索簇的无监督学习过程。</li>
+        <li style="font-size:18px">从实际应用的角度看，聚类分析是数据预处理(降维)和信息挖掘的主要任务之一。</li>
         <p style="font-size: 19px">2.原理</p>
         <p>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;假定研究对象均用所谓的“点”来表示。
@@ -173,14 +176,14 @@
           <br />
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一般的规则：
         </p>
-        <img src="@/assets/images/f10010.png" />
+        <img src="@/assets/images/f10010.png" style="width: 600px;height: 300px;"/>
         <br />
         <img src="@/assets/images/f10011.png" />
         <br />
-        <img src="@/assets/images/f10012.png" />
+        <img src="@/assets/images/f10012.png" style="width: 600px;height: 300px;"/>
         <p style="font-weight: 700; font-size: 22px">聚类方法及其在SPSS中的实现</p>
         <p style="font-size: 19px">1.主要的聚类方法：</p>
-        <img src="@/assets/images/f10013.png" />
+        <img src="@/assets/images/f10013.png" style="width: 600px;height: 300px;"/>
         <p style="font-size: 19px">2.方法详解：</p>
         <p style="font-size: 17px">（1）：K-means聚类</p>
         <p>
@@ -188,13 +191,13 @@
           <br />
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;具体步骤如下：
         </p>
-        <img src="@/assets/images/f10014.png" />
-        <img src="@/assets/images/f10015.png" />
+        <img src="@/assets/images/f10014.png" style="width: 600px;height: 300px;"/><br />
+        <img src="@/assets/images/f10015.png" style="width: 600px;height: 300px;"/>
         <p>距离计算规则（欧几里得距离公式）：</p>
         <img src="@/assets/images/f10016.png" />
         <p>图解：</p>
-        <img src="@/assets/images/f10017.png" />
-        <img src="@/assets/images/f10018.png" />
+        <img src="@/assets/images/f10017.png" style="width: 600px;height: 300px;"/><br />
+        <img src="@/assets/images/f10018.png" style="width: 600px;height: 300px;"/>
         <p>
           K-means的优缺点：
           <br />
@@ -218,17 +221,17 @@
           <br />
           通过查询整理出了2018年我国各省份的20项基本情况，根据这些指标把这31个省市或地区分成3类。
         </p>
-        <img src="@/assets/images/f10019.png" />
+        <img src="@/assets/images/f10019.png" style="width: 600px;height: 300px;"/>
         <p>分析步骤：分析>>分类>>K-均值聚类>>迭代>>次数>>选项>>勾选统计>>确认</p>
-        <img src="@/assets/images/f10020.png" />
-        <img src="@/assets/images/f10021.png" />
+        <img src="@/assets/images/f10020.png" style="width: 600px;height: 400px;"/><br />
+        <img src="@/assets/images/f10021.png" style="width: 600px;"/>
         <p>结果分析：</p>
-        <img src="@/assets/images/f10022.png" />
+        <img src="@/assets/images/f10022.png" /><br />
         <img src="@/assets/images/f10023.png" />
         <p>若不收敛则调大迭代次数</p>
         <img src="@/assets/images/f10024.png" />
         <p>方差分析表：</p>
-        <img src="@/assets/images/f10025.png" />
+        <img src="@/assets/images/f10025.png" style="width: 600px;height: 400px;"/>
         <p>其中聚类均方对应组间均方差，误差均方对应组内均方差，显著性p&lt;0.05时说明此变量分类效果好。由表可知，大部分变量的p&lt;0.05,且组间均方差大于组内均方差，说明各变量在三个类别中的差异大，分类结果可信度高。</p>
         <img src="@/assets/images/f10026.png" />
         <br />
diff --git a/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue b/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
index f554b43..cf687af 100644
--- a/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/emotion-analysis.vue
@@ -197,7 +197,7 @@
           <br />
           另一个挑战是: 大多数情况下文本是非结构化数据(not structured)。
         </p>
-        <img src="@/assets/images/f4001.png" alt="" />
+        <img src="@/assets/images/f4001.png" alt="" style="width: 600px;"/>
         <p style="font-weight: 700; font-size: 22px">文本分析步骤</p>
         <p>
           &nbsp;&nbsp;&nbsp;&nbsp;1.句法分析(Parsing): 是指处理非结构化文本使其具有一定的结构，供将来分析的过程。句法分析将文本进行解构，然后以一种更为结构化的方式来呈现。(unsturctured -> sturctured)
@@ -248,7 +248,7 @@
         <li>停止词(stop word): 在给定语言中，并非所有的单词都需要被考虑。(比如：the, a, of, and, to等这些不太可能有助于语义的理解)</li>
         <li>词根法(Lemmatization)和词干法(Stemming): 词根法看单词的意义(如: Goose, geese, goose, gander, ganders)。词干法看单词的组成(如：walk, walking, Walk, walks, walked)。最受欢迎的是"Porter stemmer", “WordNet”。</li>
         <li>词袋法(Bag-of-words representation): 将文档转化成高维向量(high-dimensional vector)，向量指示了文档中各个单词的 存在/不存在/出现频率(presence/absence/frequency)。</li>
-        <img src="@/assets/images/f4002.png" alt="" />
+        <img src="@/assets/images/f4002.png" alt="" style="width: 600px;height: 500px;"/>
         <p>词袋法足够简单(朴素且过分简化问题 naive and over-simplified) 并被广泛应用于文本分析问题中 (是入门的好方法)。其将文档表示为一组词语(单词)，而忽略了其他信息(如顺序 order，上下文 context，推论 inferences和语义 semantics)。比如，“a dog bites a man” 和 "a man bites a dog"意思完全不同但是他们在词袋法里是同一种表示。</p>
         <li>语料库的表示(Representation of a corpus): 语料库可以大到包括一种或者多种语言的所有文档，也可以小到仅限于特定领域(focused on a specific domains)。</li>
         <p>
@@ -380,7 +380,7 @@
           <br />
           分类方法(朴素贝叶斯，最大熵，或者支持向量机SVM) 经常被用来提取语料库统计以用于情感分析。
         </p>
-        <img src="@/assets/images/f4013.png" alt="" />
+        <img src="@/assets/images/f4013.png" alt="" style="width: 600px;height: 300px;"/>
         <p>分类器仅基于对其进行训练的数据集来确定情感：</p>
         <li>词义随着领域不同而改变。</li>
         <li>因此模型无法直接应用于其他领域。</li>
@@ -398,15 +398,15 @@
         <p style="font-weight: 700; font-size: 22px">获得结果(gaining insights)</p>
         <p style="font-weight: 600; font-size: 18px">词云(word cloud)</p>
         <p>五星好评的词云</p>
-        <img src="@/assets/images/f4015.png" alt="" />
+        <img src="@/assets/images/f4015.png" alt="" style="width: 600px;height: 400px;"/>
         <p>一星差评的词云：</p>
         <img src="@/assets/images/f4016.png" alt="" />
         <p>TFIDF能够用来凸显评论中有信息量的单词。</p>
-        <img src="@/assets/images/f4017.png" alt="" />
+        <img src="@/assets/images/f4017.png" alt="" style="width: 600px;height: 400px;"/>
         <p>LDA可以把评论归类为主题。圆盘的大小代表了词的权重。</p>
-        <img src="@/assets/images/f4018.png" alt="" />
+        <img src="@/assets/images/f4018.png" alt="" style="width: 600px;height: 400px;"/>
         <p>另一种可视化方式。</p>
-        <img src="@/assets/images/f4019.png" alt="" />
+        <img src="@/assets/images/f4019.png" alt="" style="width: 600px;height: 400px;"/>
       </div>
     </template>
   </popModel>
diff --git a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
index 1b5f73c..09bc0b3 100644
--- a/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
+++ b/src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue
@@ -175,7 +175,7 @@
         </p>
         <p style="font-size: 19px; font-weight: 600">相关关系的描述与测量</p>
         <li>散点图：可以通过散点图判断两个变量之间有无相关关系，并对变量间的关系形态做出大致的描述。</li>
-        <img src="@/assets/images/f3001.png" alt="" />
+        <img src="@/assets/images/f3001.png" alt="" style="height:500px"/>
         <li>相关系数：是度量变量之间线性关系强度的一个统计量。</li>
         <p>
           若相关系数是根据总体全部数据计算的，称为总体相关系数，记为ρ；
@@ -261,7 +261,7 @@
         <p style="font-size: 19px; font-weight: 600">参数的最小二乘估计</p>
         <img src="@/assets/images/f3012.png" alt="" />
         <br />
-        <img src="@/assets/images/f3013.png" alt="" />
+        <img src="@/assets/images/f3013.png" alt="" style="height: 400px;width: 400px;"/>
         <br />
         <img src="@/assets/images/f3014.png" alt="" />
         <p style="font-size: 19px; font-weight: 600">回归直线的拟合优度</p>
@@ -292,12 +292,12 @@
           ，求出因变量y yy的平均值的估计区间，这一估计区间称为置信区间。
         </li>
         <p>比平均值的公式根号内多了个1而已：</p>
-        <img src="@/assets/images/f3023.png" alt="" />
+        <img src="@/assets/images/f3023.png" alt="" style="width: 600px;"/>
         <p style="font-size: 19px; font-weight: 600">残差分析</p>
         <p style="font-size: 16px; font-weight: 600">残差与残差图（检验方差齐性）</p>
         <li>残差：因变量的观测值与根据估计的回归方程求出的预测值之差，用e表示，反映了用估计的回归方程去预测而引起的误差。</li>
-        <img src="@/assets/images/f3024.png" alt="" />
-        <img src="@/assets/images/f3025.png" alt="" />
+        <img src="@/assets/images/f3024.png" alt="" /><br />
+        <img src="@/assets/images/f3025.png" alt="" style="width: 600px;height: 400px;"/>
         <p style="font-size: 19px; font-weight: 600">标准化残差（检验正态性）</p>
         <li>标准化残差：也称为Pearson 残差或半学生化残差(semistudentized residuals)。</li>
         <img src="@/assets/images/f3026.png" alt="" />