circulation_ancientCoins_new/components/visitorAccount.vue

<template>
  <view :class="'visitor-account-com'+(open?' default-open':'')">
		<uni-collapse v-model="open?valueOpen:valueClose">
			<uni-collapse-item title="广安门中医医院中西医门诊部 中医科" :thumb="thumb" :errmsg="errmsg" :disabled="disabled">
				<view class="collapse-list">
					<view class="account-list">
						<view class="account-item">
							<view class="title PfScSemibold">单次项目</view>
							<view class="item">
								<text>针灸</text>
								<text>治疗1次</text>
							</view>
							<view class="item">
								<text>麦粒灸</text>
								<text>治疗3次</text>
							</view>
							<view class="item notice">
								<text>艾灸</text>
								<text class="outnum">欠1次</text>
							</view>
						</view>
						
						<view class="account-item">
							<view class="accout-package">
								<view class="title PfScSemibold">疗程套餐</view>
								<span class="package-name over">上热下寒疗程包</span>
								<view class="item">
									<text>针灸</text>
									<text>治疗1次</text>
								</view>
								<view class="item">
									<text>麦粒灸</text>
									<text>治疗3次</text>
								</view>
								<view class="item notice">
									<text>艾灸</text>
									<text class="outnum">欠1次</text>
								</view>
							</view>
							
							<view class="accout-package">
								<view class="title PfScMedium">疗程套餐</view>
								<span class="package-name over">上热下寒疗程包</span>
								<view class="item">
									<text>针灸</text>
									<text>治疗1次</text>
								</view>
								<view class="item">
									<text>麦粒灸</text>
									<text>治疗3次</text>
								</view>
								<view class="item notice">
									<text>艾灸</text>
									<text class="outnum">欠1次</text>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</uni-collapse-item>
			
		</uni-collapse>
  </view>
</template>

<script>
export default {
  name: "visitorAccount",
  props: {
		errmsg: {
			type: String,
			default: ''
		},
		thumb:{
			type: String,
			default:''
		},
		open: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
  },
  data() {
    return {
			cssUrl:this.cssUrl,
			valueOpen:['0'],
			valueClose:['1'],
			
    }
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
	.visitor-account-com{
		width: 100%;
		height: auto;
		overflow: hidden;
		&.default-open{
			::v-deep{
				.uni-collapse-item__title{
					display: none !important;
				}
				.account-list{
					margin-top: 0 !important;
				}
				.uni-collapse-item__wrap{
					margin-top: 16rpx;
				}
				
				.uni-collapse-item__wrap-content{
					border: none !important;
				}
			}
		}
		::v-deep{
			.uni-collapse-item__wrap{
				background: #F9FAFB;
				.uni-collapse-item__wrap-content{
					background: #F8FFF7;
					margin-bottom:24rpx;
					&.open{
						.account-list{
							padding: 24rpx;
							margin-top: 24rpx;
							box-sizing: border-box;
							width: 100%;
							height: auto;
							overflow: hidden;
							.account-item{
								margin-bottom: 40rpx;
								&:last-of-type{
									margin-bottom: 24rpx;
								}
								.item{
									display: flex;
									justify-content: space-between;
									align-items: center;
									height: 38rpx;
									line-height: 38rpx;
									margin-top: 24rpx;
									font-size: 28rpx;
									letter-spacing: 3.14rpx;
									color: #333333;
									text{
										&.outnum{
											color: #FD3B3B;
										}
									}
								}
								.accout-package{
									margin-bottom: 40rpx;
									&:last-of-type{
										margin-bottom: 0rpx;
									}
									.package-name{
										border-radius: 6rpx;
										background: linear-gradient(270deg, #FFEFD5 0%, #FED9A6 100%);
										height: 43rpx;
										line-height: 43rpx;
										padding: 0px 16rpx;
										margin-top: 24rpx;
										width: auto;
										display: inline-block;
										font-size: 28rpx;
										color: #79624A;
										text-align: center;
										max-width: calc(100% - 24rpx);
									}
								}
							}
						}
					}
				}
			}
		}
	}

</style>