Merge branch 'master' of git.zdool.com:xs/yyx/h5

package-lock.json

@@ -3121,44 +3121,6 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "css-loader": {
           "version": "3.6.0",
           "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-3.6.0.tgz",
@@ -3232,13 +3194,6 @@
             "slash": "^2.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "hash-sum": {
           "version": "2.0.0",
           "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
@@ -3353,42 +3308,6 @@
           "requires": {
             "minipass": "^3.1.1"
           }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "loader-utils": {
-              "version": "2.0.4",
-              "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
-              "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-              }
-            }
-          }
         }
       }
     },
@@ -16721,6 +16640,94 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "hash-sum": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+          "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

src/pagesD/jgsz/index.vue

@@ -1,8 +1,186 @@
 <template>
+  <!-- 文艺下乡 -->
+  <view class="wyxx">
+    <view class="tabTitle">
+      <view :class="tabC == '0' ? 'tabsC' : 'tabs'" @click="toTab('0')">
+        <view> 组织架构 </view>
+        <view class="line"></view>
+      </view>
+      <view :class="tabC == '1' ? 'tabsC' : 'tabs'" @click="toTab('1')">
+        <view> 人员信息 </view>
+        <view class="line"></view>
+      </view>
+      <view :class="tabC == '2' ? 'tabsC' : 'tabs'" @click="toTab('2')">
+        <view> 发展历程 </view>
+        <view class="line"></view>
+      </view>
+    </view>
+    <view class="forms" v-if="tabC == '0'" >
+      <view class="teamBox" v-for="(item, index) in 6">
+        <view class="teamBox-right">
+          <image src="../../static/txIcon.png" mode=""></image>
+        </view>
+        <view class="teamBox-left">
+          <view class="teamMinbox-top">
+            <view class="title">张三</view>
+            <view class="street">会长</view>
+          </view>
+          <view class="teamMinbox-bottom">
+            xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="forms" v-if="tabC == '1'" >
+      <view class="teamBox" v-for="(item, index) in 2">
+        <view class="teamBox-right">
+          <image src="../../static/txIcon.png" mode=""></image>
+        </view>
+        <view class="teamBox-left">
+          <view class="teamMinbox-top">
+            <view class="title">xx团队</view>
+            <view class="street">丹东街道</view>
+          </view>
+          <view class="teamMinbox-bottom">
+            xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="forms" v-if="tabC == '2'" >
+      <view class="teamBox" v-for="(item, index) in 3">
+        <view class="teamBox-right">
+          <image src="../../static/txIcon.png" mode=""></image>
+        </view>
+        <view class="teamBox-left">
+          <view class="teamMinbox-top">
+            <view class="title">xx团队</view>
+            <view class="street">丹东街道</view>
+          </view>
+          <view class="teamMinbox-bottom">
+            xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
+export default {
+  data() {
+    return {
+      tabC: "0",
+    };
+  },
+  onShow() {
+    // this.getData();
+  },
+  methods: {
+    toTab(val) {
+      this.tabC = val;
+      // this.getData()
+    },
+  },
+};
 </script>
 
-<style>
+<style lang="scss">
+.wyxx {
+  background-color: #fefefe;
+}
+
+.tabTitle {
+  display: flex;
+  width: 100%;
+  background: #ffffff;
+
+  .tabs {
+    width: 33.3%;
+    text-align: center;
+    padding: 32rpx 0 0rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+
+    .line {
+      width: 36rpx;
+      height: 4rpx;
+      margin: 10rpx auto 8rpx;
+    }
+  }
+
+  .tabsC {
+    width: 33.3%;
+    text-align: center;
+    padding: 32rpx 0 0;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #000;
+
+    .line {
+      width: 44rpx;
+      height: 4rpx;
+      margin: 10rpx auto 8rpx;
+      background-color: #a02521;
+    }
+  }
+}
+
+.forms {
+  width: 90%;
+  //   height: 40rpx;
+  //   background-color: skyblue;
+  margin: 40rpx auto 0rpx;
+  .teamBox {
+    height: 140rpx;
+    padding: 18rpx 10rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    display: flex;
+    .teamBox-right {
+      margin-right: 20rpx;
+      image {
+        width: 180rpx;
+        height: 130rpx;
+        background-size: contain;
+      }
+    }
+    .teamBox-left {
+    //   width: 400rpx;
+      .teamMinbox-top {
+        display: flex;
+        margin-bottom: 16rpx;
+        .title {
+          font-weight: 600;
+          font-size: 32rpx;
+          max-width: 160rpx;
+          overflow: hidden; /* 超出一行文字自动隐藏 */
+          text-overflow: ellipsis; /*文字隐藏后添加省略号*/
+          white-space: nowrap;
+        }
+        .street {
+          height: 40rpx;
+          border-radius: 30rpx;
+          background-color: rgba(240, 240, 240, 1);
+          color: #a02521;
+          margin-left: 18rpx;
+          padding: 2rpx 20rpx;
+          max-width:120rpx;
+          overflow: hidden; /* 超出一行文字自动隐藏 */
+          text-overflow: ellipsis; /*文字隐藏后添加省略号*/
+          white-space: nowrap;
+        }
+      }
+      .teamMinbox-bottom {
+        font-size: 28rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

src/pagesD/wyxx/index.vue

@@ -1,8 +1,186 @@
 <template>
+  <!-- 文艺下乡 -->
+  <view class="wyxx">
+    <view class="tabTitle">
+      <view :class="tabC == '0' ? 'tabsC' : 'tabs'" @click="toTab('0')">
+        <view> 文艺团队 </view>
+        <view class="line"></view>
+      </view>
+      <view :class="tabC == '1' ? 'tabsC' : 'tabs'" @click="toTab('1')">
+        <view> 文艺节目 </view>
+        <view class="line"></view>
+      </view>
+      <view :class="tabC == '2' ? 'tabsC' : 'tabs'" @click="toTab('2')">
+        <view> 下乡计划 </view>
+        <view class="line"></view>
+      </view>
+    </view>
+    <view class="forms" v-if="tabC == '0'" >
+      <view class="teamBox" v-for="(item, index) in 6">
+        <view class="teamBox-right">
+          <image src="../../static/txIcon.png" mode=""></image>
+        </view>
+        <view class="teamBox-left">
+          <view class="teamMinbox-top">
+            <view class="title">xx团队</view>
+            <view class="street">丹东街道</view>
+          </view>
+          <view class="teamMinbox-bottom">
+            xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="forms" v-if="tabC == '1'" >
+      <view class="teamBox" v-for="(item, index) in 2">
+        <view class="teamBox-right">
+          <image src="../../static/txIcon.png" mode=""></image>
+        </view>
+        <view class="teamBox-left">
+          <view class="teamMinbox-top">
+            <view class="title">xx团队</view>
+            <view class="street">丹东街道</view>
+          </view>
+          <view class="teamMinbox-bottom">
+            xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="forms" v-if="tabC == '2'" >
+      <view class="teamBox" v-for="(item, index) in 3">
+        <view class="teamBox-right">
+          <image src="../../static/txIcon.png" mode=""></image>
+        </view>
+        <view class="teamBox-left">
+          <view class="teamMinbox-top">
+            <view class="title">xx团队</view>
+            <view class="street">丹东街道</view>
+          </view>
+          <view class="teamMinbox-bottom">
+            xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队xx团队
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
+export default {
+  data() {
+    return {
+      tabC: "0",
+    };
+  },
+  onShow() {
+    // this.getData();
+  },
+  methods: {
+    toTab(val) {
+      this.tabC = val;
+      // this.getData()
+    },
+  },
+};
 </script>
 
-<style>
+<style lang="scss">
+.wyxx {
+  background-color: #fefefe;
+}
+
+.tabTitle {
+  display: flex;
+  width: 100%;
+  background: #ffffff;
+
+  .tabs {
+    width: 33.3%;
+    text-align: center;
+    padding: 32rpx 0 0rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+
+    .line {
+      width: 36rpx;
+      height: 4rpx;
+      margin: 10rpx auto 8rpx;
+    }
+  }
+
+  .tabsC {
+    width: 33.3%;
+    text-align: center;
+    padding: 32rpx 0 0;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #000;
+
+    .line {
+      width: 44rpx;
+      height: 4rpx;
+      margin: 10rpx auto 8rpx;
+      background-color: #a02521;
+    }
+  }
+}
+
+.forms {
+  width: 90%;
+  //   height: 40rpx;
+  //   background-color: skyblue;
+  margin: 40rpx auto 0rpx;
+  .teamBox {
+    height: 140rpx;
+    padding: 18rpx 10rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    display: flex;
+    .teamBox-right {
+      margin-right: 20rpx;
+      image {
+        width: 180rpx;
+        height: 130rpx;
+        background-size: contain;
+      }
+    }
+    .teamBox-left {
+    //   width: 400rpx;
+      .teamMinbox-top {
+        display: flex;
+        margin-bottom: 16rpx;
+        .title {
+          font-weight: 600;
+          font-size: 32rpx;
+          max-width: 160rpx;
+          overflow: hidden; /* 超出一行文字自动隐藏 */
+          text-overflow: ellipsis; /*文字隐藏后添加省略号*/
+          white-space: nowrap;
+        }
+        .street {
+          height: 40rpx;
+          border-radius: 30rpx;
+          background-color: rgba(240, 240, 240, 1);
+          color: #a02521;
+          margin-left: 18rpx;
+          padding: 2rpx 20rpx;
+          max-width:120rpx;
+          overflow: hidden; /* 超出一行文字自动隐藏 */
+          text-overflow: ellipsis; /*文字隐藏后添加省略号*/
+          white-space: nowrap;
+        }
+      }
+      .teamMinbox-bottom {
+        font-size: 28rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

src/pagesD/xskz/index.vue

@@ -1,8 +1,231 @@
 <template>
+  <!-- 文艺下乡 -->
+  <view class="wyxx">
+    <view class="tabTitle">
+      <view :class="tabC == '0' ? 'tabsC' : 'tabs'" @click="toTab('0')">
+        <view> 分类 </view>
+        <view class="line"></view>
+      </view>
+      <view :class="tabC == '1' ? 'tabsC' : 'tabs'" @click="toTab('1')">
+        <view> 分类1 </view>
+        <view class="line"></view>
+      </view>
+      <view :class="tabC == '2' ? 'tabsC' : 'tabs'" @click="toTab('2')">
+        <view> 分类2 </view>
+        <view class="line"></view>
+      </view>
+      <view :class="tabC == '3' ? 'tabsC' : 'tabs'" @click="toTab('3')">
+        <view> 分类3 </view>
+        <view class="line"></view>
+      </view>
+      <view :class="tabC == '4' ? 'tabsC' : 'tabs'" @click="toTab('4')">
+        <view> 分类4 </view>
+        <view class="line"></view>
+      </view>
+    </view>
+    <view class="forms" v-if="tabC == '0'">
+      <view class="teamBox" v-for="(item, index) in videoList">
+        <view class="teamBox-top">
+          <video
+            id="video"
+            style="width: 100%; height: 100%"
+            object-fit="cover"
+            controls
+            :src="item.video"
+            poster="../../static/orderE.png"
+          >
+            <!-- <source :src="item.video" type="video/mp4" />
+            <source :src="item.video" type="video/ogg" /> -->
+          </video>
+          <view class="mask" @click="playMask(index)" v-if="item.play">
+            <text>{{ item.title }}</text>
+            <image src="../../static/play.png"></image>
+          </view>
+        </view>
+        <view class="teamBox-bottom">
+          <view class="interactive">
+            <image src="../../static/play.png" mode=""></image>
+            <view class="title">{{ item.playback }}</view>
+          </view>
+          <view class="interactive">
+            <image src="../../static/workDetail/heart1.png" mode=""></image>
+            <view class="title">{{ item.like }}</view>
+          </view>
+          <view class="interactive">
+            <image src="../../static/workDetail/star1.png" mode=""></image>
+            <view class="title">{{ item.collect }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
+export default {
+  data() {
+    return {
+      tabC: "0",
+      videoList: [
+        {
+          title:
+            "美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学",
+          playback: "40.123",
+          like: "8.112.490",
+          collect: "8.112.490",
+          video: require("../../../../../image/女装大宝.mp4"),
+          play: true,
+        },
+        {
+          title:
+            "美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学",
+          playback: "40.123",
+          like: "8.112.490",
+          collect: "8.112.490",
+          video: require("../../../../../image/女装大宝.mp4"),
+          play: true,
+        },
+        {
+          title:
+            "美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学",
+          playback: "40.123",
+          like: "8.112.490",
+          collect: "8.112.490",
+          video: require("../../../../../image/女装大宝.mp4"),
+          play: true,
+        },
+        {
+          title:
+            "美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学美丽科学",
+          playback: "40.123",
+          like: "8.112.490",
+          collect: "8.112.490",
+          video: require("../../../../../image/女装大宝.mp4"),
+          play: true,
+        },
+      ],
+    };
+  },
+  onShow() {
+    // this.getData();
+  },
+  mounted() {},
+  methods: {
+    toTab(val) {
+      this.tabC = val;
+      // this.getData()
+    },
+    playMask(index) {
+      this.videoList[index].play = false;
+
+      var video = document.getElementById("video");
+      //   暂停播放
+      video.addEventListener("pause", function (e) {
+        console.log("暂停播放");
+        console.log(e);
+      });
+      // 15、ended：播放结束
+      video.addEventListener("ended", function (e) {
+        console.log("视频播放完了");
+        console.log(e);
+      });
+    },
+  },
+};
 </script>
 
-<style>
+<style lang="scss">
+.wyxx {
+  background-color: #fefefe;
+}
+
+.tabTitle {
+  display: flex;
+  width: 100%;
+  background: #ffffff;
+
+  .tabs {
+    width: 33.3%;
+    text-align: center;
+    padding: 32rpx 0 0rpx;
+    font-size: 28rpx;
+    font-weight: 400;
+    color: #333333;
+
+    .line {
+      width: 36rpx;
+      height: 4rpx;
+      margin: 10rpx auto 8rpx;
+    }
+  }
+
+  .tabsC {
+    width: 33.3%;
+    text-align: center;
+    padding: 32rpx 0 0;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #000;
+
+    .line {
+      width: 44rpx;
+      height: 4rpx;
+      margin: 10rpx auto 8rpx;
+      background-color: #a02521;
+    }
+  }
+}
+
+.forms {
+  width: 90%;
+  margin: 40rpx auto 0rpx;
+  .teamBox {
+    .teamBox-top {
+      height: 400rpx;
+      position: relative;
+      //   video {
+      //     position: relative;
+      //   }
+      .mask {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.1);
+        z-index: 99;
+        text {
+          //   position: absolute;
+          //   left: 60rpx;
+          color: #fff;
+          max-width: 500rpx;
+          overflow: hidden; /* 超出一行文字自动隐藏 */
+          text-overflow: ellipsis; /*文字隐藏后添加省略号*/
+          white-space: nowrap;
+        }
+        image {
+          width: 60rpx;
+          height: 60rpx;
+          margin: 110rpx 0 0 300rpx;
+        }
+      }
+    }
+    .teamBox-bottom {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding: 15rpx 15rpx;
+      background-color: #fff;
+      box-sizing: border-box;
+      .interactive {
+        display: flex;
+        align-items: center;
+        image {
+          width: 30rpx;
+          height: 30rpx;
+          margin-right: 12rpx;
+        }
+      }
+    }
+  }
+}
 </style>