添加采样过程视频

components.d.ts

@@ -39,9 +39,11 @@ declare module 'vue' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -54,6 +56,7 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
     FluxcdStatictics: typeof import('./src/components/soilcdStatistics/fluxcdStatictics.vue')['default']
     HeavyMetalEnterprisechart: typeof import('./src/components/atmpollution/heavyMetalEnterprisechart.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']

src/views/User/HmOutFlux/agriInput/farmInputSamplingDesc.vue

@@ -175,6 +175,22 @@
         </div>
       </div>
     </div>
+
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">5</div>
+        <h2>农业投入品输入过程视频演示</h2>
+      </div>
+      
+      <div class="video-section">
+        <div class="video-container">
+          <video controls class="sampling-video">
+            <source src='@/assets/videos/农业投入品.mp4' type="video/mp4">
+            您的浏览器不支持HTML5视频播放。
+          </video>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -596,4 +612,88 @@ h2 {
     max-height: 250px;
   }
 }
+/* 新增视频模块样式 */
+.video-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.video-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.video-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-video {
+  width: 100%;
+  height: auto;
+  display: block;
+  background: #f8fafc;
+  min-height: 400px;
+}
+
+.video-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.video-caption::before {
+  content: "📹";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.video-description {
+  background: rgba(245, 249, 255, 0.6);
+  border-radius: 12px;
+  padding: 20px;
+  border-left: 4px solid #3acfd5;
+}
+
+.video-description h3 {
+  color: #1a365d;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.4rem;
+}
+
+.video-description ul {
+  padding-left: 25px;
+  margin: 15px 0;
+}
+
+.video-description li {
+  margin-bottom: 10px;
+  line-height: 1.7;
+  position: relative;
+}
+
+.video-description li::before {
+  content: "•";
+  color: #3acfd5;
+  font-size: 1.2rem;
+  position: absolute;
+  left: -20px;
+  top: 0;
+}
 </style>

src/views/User/HmOutFlux/irrigationWater/samplingMethodDevice1.vue

@@ -95,6 +95,21 @@
         </div>
       </div>
     </div>
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">3</div>
+        <h2>灌溉水输入过程视频演示</h2>
+      </div>
+      
+      <div class="video-section">
+        <div class="video-container">
+          <video controls class="sampling-video">
+            <source src='@/assets/videos/灌溉水.mp4' type="video/mp4">
+            您的浏览器不支持HTML5视频播放。
+          </video>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -383,4 +398,88 @@ h2 {
     height: 200px;
   }
 }
+/* 新增视频模块样式 */
+.video-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.video-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.video-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-video {
+  width: 100%;
+  height: auto;
+  display: block;
+  background: #f8fafc;
+  min-height: 400px;
+}
+
+.video-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.video-caption::before {
+  content: "📹";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.video-description {
+  background: rgba(245, 249, 255, 0.6);
+  border-radius: 12px;
+  padding: 20px;
+  border-left: 4px solid #3acfd5;
+}
+
+.video-description h3 {
+  color: #1a365d;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.4rem;
+}
+
+.video-description ul {
+  padding-left: 25px;
+  margin: 15px 0;
+}
+
+.video-description li {
+  margin-bottom: 10px;
+  line-height: 1.7;
+  position: relative;
+}
+
+.video-description li::before {
+  content: "•";
+  color: #3acfd5;
+  font-size: 1.2rem;
+  position: absolute;
+  left: -20px;
+  top: 0;
+}
 </style>

src/views/User/HmOutFlux/totalInputFluxDesc.vue

@@ -32,6 +32,21 @@
         </div>
       </div>
     </div>
+    <div class="content-section">
+      <div class="section-header">
+        <div class="section-number">2</div>
+        <h2>总通量输入过程视频演示</h2>
+      </div>
+      
+      <div class="video-section">
+        <div class="video-container">
+          <video controls class="sampling-video">
+            <source src='@/assets/videos/输入总通量.mp4' type="video/mp4">
+            您的浏览器不支持HTML5视频播放。
+          </video>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -364,4 +379,88 @@ h2 {
     font-size: 1.5rem;
   }
 }
+/* 新增视频模块样式 */
+.video-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.video-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.video-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-video {
+  width: 100%;
+  height: auto;
+  display: block;
+  background: #f8fafc;
+  min-height: 400px;
+}
+
+.video-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.video-caption::before {
+  content: "📹";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.video-description {
+  background: rgba(245, 249, 255, 0.6);
+  border-radius: 12px;
+  padding: 20px;
+  border-left: 4px solid #3acfd5;
+}
+
+.video-description h3 {
+  color: #1a365d;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.4rem;
+}
+
+.video-description ul {
+  padding-left: 25px;
+  margin: 15px 0;
+}
+
+.video-description li {
+  margin-bottom: 10px;
+  line-height: 1.7;
+  position: relative;
+}
+
+.video-description li::before {
+  content: "•";
+  color: #3acfd5;
+  font-size: 1.2rem;
+  position: absolute;
+  left: -20px;
+  top: 0;
+}
 </style>

src/views/User/hmInFlux/grainRemoval/samplingDesc1.vue

@@ -30,7 +30,7 @@
           
           <div class="image-card">
             <video controls class="sampling-image">
-              <source src="@/assets/videos/秸秆移除和籽粒移除.mp4" type="video/mp4">
+              <source src="@/assets/videos/籽粒移除.mp4" type="video/mp4">
               您的浏览器不支持HTML5视频播放。
             </video>
             <div class="image-info">

src/views/User/hmInFlux/strawRemoval/samplingDesc2.vue

@@ -30,7 +30,7 @@
           
           <div class="image-card">
             <video controls class="sampling-image">
-              <source src="@/assets/videos/秸秆移除和籽粒移除.mp4" type="video/mp4">
+              <source src="@/assets/videos/秸秆移除.mp4" type="video/mp4">
               您的浏览器不支持HTML5视频播放。
             </video>
             <div class="image-info">

src/views/User/hmInFlux/totalOutputFluxDesc.vue

@@ -33,6 +33,21 @@
         </div>
       </div>
     </div>
+     <div class="content-section">
+      <div class="section-header">
+        <div class="section-number">2</div>
+        <h2>总通量输出过程视频演示</h2>
+      </div>
+      
+      <div class="video-section">
+        <div class="video-container">
+          <video controls class="sampling-video">
+            <source src='@/assets/videos/输出总通量.mp4' type="video/mp4">
+            您的浏览器不支持HTML5视频播放。
+          </video>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -368,4 +383,88 @@ h2 {
     font-size: 1.5rem;
   }
 }
+/* 新增视频模块样式 */
+.video-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.video-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.video-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-video {
+  width: 100%;
+  height: auto;
+  display: block;
+  background: #f8fafc;
+  min-height: 400px;
+}
+
+.video-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.video-caption::before {
+  content: "📹";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.video-description {
+  background: rgba(245, 249, 255, 0.6);
+  border-radius: 12px;
+  padding: 20px;
+  border-left: 4px solid #3acfd5;
+}
+
+.video-description h3 {
+  color: #1a365d;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.4rem;
+}
+
+.video-description ul {
+  padding-left: 25px;
+  margin: 15px 0;
+}
+
+.video-description li {
+  margin-bottom: 10px;
+  line-height: 1.7;
+  position: relative;
+}
+
+.video-description li::before {
+  content: "•";
+  color: #3acfd5;
+  font-size: 1.2rem;
+  position: absolute;
+  left: -20px;
+  top: 0;
+}
 </style>