This commit is contained in:
duanxiaohai
parent
7b36ef018d
commit
77cd5b3adf
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue