Merge branch 'master' of git.zdool.com:xs/yyx/h5
This commit is contained in:
commit
73a1514166
|
@ -3121,44 +3121,6 @@
|
||||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||||
"dev": true
|
"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": {
|
"css-loader": {
|
||||||
"version": "3.6.0",
|
"version": "3.6.0",
|
||||||
"resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-3.6.0.tgz",
|
"resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-3.6.0.tgz",
|
||||||
|
@ -3232,13 +3194,6 @@
|
||||||
"slash": "^2.0.0"
|
"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": {
|
"hash-sum": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
|
||||||
|
@ -3353,42 +3308,6 @@
|
||||||
"requires": {
|
"requires": {
|
||||||
"minipass": "^3.1.1"
|
"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-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": {
|
"vue-style-loader": {
|
||||||
"version": "4.1.3",
|
"version": "4.1.3",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
|
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
|
||||||
|
|
|
@ -1,8 +1,186 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabC: "0",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toTab(val) {
|
||||||
|
this.tabC = val;
|
||||||
|
// this.getData()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</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>
|
</style>
|
|
@ -1,8 +1,186 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabC: "0",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toTab(val) {
|
||||||
|
this.tabC = val;
|
||||||
|
// this.getData()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</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>
|
</style>
|
|
@ -1,8 +1,231 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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>
|
</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>
|
</style>
|
Loading…
Reference in New Issue