ParkApp/pages/agency/comps/agency-info.vue

<template>
	<view>
		<view class="container" style="z-index: 999999;">
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
			<view class="meteor"></view>
		</view>
		
		<swiper   class="screen-swiper square-dot "  :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<image   :src="item.banners" mode="aspectFill" ></image>
			</swiper-item>
		</swiper>
		
		<view class="card">
			<view class="flex flex-direction justify-center padding-left-20">
				<text class="text-bold agency-name  text-lg" style="padding-bottom: 12rpx;">{{detailData.agencyName}}</text>
			</view>
		</view>
		<view class="bg-white text-black">
			<view class="flex" style="padding:20rpx 30rpx 0;">
				<image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;" src="../../../static/icon/tag1.png" mode=""></image>
				<text class="text-lg  padding-left-10" >其他信息</text>
			</view>
			<view class="cu-list menu text-df padding-top-20">
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-profilefill base-color" style="font-size: 32rpx;"></text>
						<text class="">法定代表人</text>
					</view>
					<view class="action">
						<text>{{detailData.personName}}</text>
					</view>
				</view>
				
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-mobilefill text-bold base-color" style="font-size: 32rpx;"></text>
						<text class="">联系方式</text>
					</view>
					<view class="action">
						<text>{{detailData.personPhone}}</text>
					</view>
				</view>
			</view>
			<view class="" style="padding: 20rpx 40rpx;">
				<view class="">
					<text class="cuIcon-locationfill base-color " style="margin-right: 20rpx;"></text>
					公司地址：
				</view>
				<view class="text-cut-2 " style="padding: 20rpx 10rpx">
					<text>{{detailData.address}}</text>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailData:{},
				bannerList:[]
			}
		},
		created() {
			this.fetchBanner()
			this.fetchDeatilData()
		},
		methods: {
			fetchBanner(){
				let params={
					// tenantId:this.$cache.get('agencyTenantId')
				}
				this.$api.banner.page(params).then(res=>{
					if (!this.$isEmpty(res.data.records)) {
						this.bannerList=res.data.records
					}
				})
			},
			fetchDeatilData(){
				let params={
					id:this.$cache.get('agencyId')
				}
				this.$api.agency.page(params).then(res=>{
					this.detailData=res.data.records[0]
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}

	@keyframes typing {
		from {
			width: 0;
		}
	}
	
	.agency-name {
		line-height: 100rpx;
		width: 750rpx;
		font-size: 35rpx;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		animation: typing 8s;
	}
	
	.card{
		padding: 20rpx;
		background-color: #FFFFFF;
		margin: 10rpx;
		border-radius: 10rpx;
		display: flex;
		box-shadow: 0 10rpx rgba(248, 248, 248,.9) , -10rpx 0rpx rgba(248, 248, 248,.9) ,10rpx 0rpx rgba(248, 248, 248,.9);
		image{
			border: 1rpx solid #f1f1f1;
			width:100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
	.desc{
		background-color: #FFFFFF;
		padding:40rpx 30rpx;
		.sub-title{
			padding-top: 40rpx;
			font-size: 28rpx;
			line-height: 50rpx;
		}
	}
	
	.history{
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 40rpx 20rpx 20rpx 50rpx;
	}
	
	.top{
		padding-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.address{
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		
		
		.item{
			padding-top: 40rpx;
			.sub-address{
				padding-left: 70rpx;font-size: 26rpx;color: #bababa;
			}
		}
	}
	
	
	.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		
		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}
		
		.u-order-desc {
			padding-top: 20rpx;
			color: #8d8d8d;
			font-size: 26rpx;
			line-height: 48rpx;
			margin-bottom: 6rpx;
		}
		
		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
		
	// 流星
	.container {
		position: relative;
		width: 100%;
		height: 100%;
		-webkit-transform: rotate(45deg);
		transform: rotateZ(45deg);
		-webkit-animation: sky 200000ms linear infinite;
		animation: sky 200000ms linear infinite;
	}
	
	.meteor {
		position: absolute;
		left: 50%;
		top: 50%;
		height: 2px;
		background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
		border-radius: 999px;
		-webkit-filter: drop-shadow(0 0 6px #699bff);
		filter: drop-shadow(0 0 6px #699bff);
		-webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
		animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
	}
	
	.meteor::before,
	.meteor::after {
		content: '';
		position: absolute;
		top: calc(50% - 1px);
		right: 0;
		height: 2px;
		background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
		-webkit-transform: translateX(50%) rotateZ(45deg);
		transform: translateX(50%) rotateZ(45deg);
		border-radius: 100%;
		-webkit-animation: shining 3000ms ease-in-out infinite;
		animation: shining 3000ms ease-in-out infinite;
	}
	
	.meteor::after {
		-webkit-transform: translateX(50%) rotateZ(-45deg);
		transform: translateX(50%) rotateZ(-45deg);
	}
	
	/* 1 */
	.meteor:nth-child(1) {
		top: calc(50% - 185px);
		left: calc(50% - 150px);
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}
	
	.meteor:nth-child(1)::before,
	.meteor:nth-child(1)::after,
	.meteor:nth-child(1)::after {
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}
	
	/* 2 */
	.meteor:nth-child(2) {
		top: calc(50% - 50px);
		left: calc(50% - 180px);
		-webkit-animation-delay: 9288ms;
		animation-delay: 9288ms;
	}
	
	.meteor:nth-child(2)::before,
	.meteor:nth-child(2)::after,
	.meteor:nth-child(2)::after {
		-webkit-animation-delay: 9288ms;
		animation-delay: 9288ms;
	}
	
	.meteor:nth-child(3) {
		top: calc(50% - 145px);
		left: calc(50% - 135px);
		-webkit-animation-delay: 8600ms;
		animation-delay: 8600ms;
	}
	
	.meteor:nth-child(3)::before,
	.meteor:nth-child(3)::after,
	.meteor:nth-child(3)::after {
		-webkit-animation-delay: 8600ms;
		animation-delay: 8600ms;
	}
	
	.meteor:nth-child(4) {
		top: calc(50% - 78px);
		left: calc(50% - 155px);
		-webkit-animation-delay: 3288ms;
		animation-delay: 3288ms;
	}
	
	.meteor:nth-child(4)::before,
	.meteor:nth-child(4)::after,
	.meteor:nth-child(4)::after {
		-webkit-animation-delay: 3288ms;
		animation-delay: 3288ms;
	}
	
	.meteor:nth-child(5) {
		top: calc(50% - 183px);
		left: calc(50% - 8px);
		-webkit-animation-delay: 5588ms;
		animation-delay: 5588ms;
	}
	
	.meteor:nth-child(5)::before,
	.meteor:nth-child(5)::after,
	.meteor:nth-child(5)::after {
		-webkit-animation-delay: 5588ms;
		animation-delay: 5588ms;
	}
	
	.meteor:nth-child(6) {
		top: calc(50% - 30px);
		left: calc(50% - 195px);
		-webkit-animation-delay: 9388ms;
		animation-delay: 9388ms;
	}
	
	.meteor:nth-child(6)::before,
	.meteor:nth-child(6)::after,
	.meteor:nth-child(6)::after {
		-webkit-animation-delay: 9388ms;
		animation-delay: 9388ms;
	}
	
	.meteor:nth-child(7) {
		top: calc(50% - 95px);
		left: calc(50% - 70px);
		-webkit-animation-delay: 2588ms;
		animation-delay: 2588ms;
	}
	
	.meteor:nth-child(7)::before,
	.meteor:nth-child(7)::after,
	.meteor:nth-child(7)::after {
		-webkit-animation-delay: 2588ms;
		animation-delay: 2588ms;
	}
	
	.meteor:nth-child(8) {
		top: calc(50% - 60px);
		left: calc(50% - 70px);
		-webkit-animation-delay: 5288ms;
		animation-delay: 5288ms;
	}
	
	.meteor:nth-child(8)::before,
	.meteor:nth-child(8)::after,
	.meteor:nth-child(8)::after {
		-webkit-animation-delay: 5288ms;
		animation-delay: 5288ms;
	}
	
	.meteor:nth-child(9) {
		top: calc(50% - 75px);
		left: calc(50% - 250px);
		-webkit-animation-delay: 888ms;
		animation-delay: 888ms;
	}
	
	.meteor:nth-child(9)::before,
	.meteor:nth-child(9)::after,
	.meteor:nth-child(9)::after {
		-webkit-animation-delay: 888ms;
		animation-delay: 888ms;
	}
	
	.meteor:nth-child(9) {
		top: calc(50% - 76px);
		left: calc(50% - 240px);
		-webkit-animation-delay: 2388ms;
		animation-delay: 2388ms;
	}
	
	.meteor:nth-child(9)::before,
	.meteor:nth-child(9)::after,
	.meteor:nth-child(9)::after {
		-webkit-animation-delay: 2388ms;
		animation-delay: 2388ms;
	}
	
	.meteor:nth-child(10) {
		top: calc(50% - 85px);
		left: calc(50% - 6px);
		-webkit-animation-delay: 3588ms;
		animation-delay: 3588ms;
	}
	
	.meteor:nth-child(10)::before,
	.meteor:nth-child(10)::after,
	.meteor:nth-child(10)::after {
		-webkit-animation-delay: 3588ms;
		animation-delay: 3588ms;
	}
	
	.meteor:nth-child(11) {
		top: calc(50% - 135px);
		left: calc(50% - 260px);
		-webkit-animation-delay: 2888ms;
		animation-delay: 2888ms;
	}
	
	.meteor:nth-child(11)::before,
	.meteor:nth-child(11)::after,
	.meteor:nth-child(11)::after {
		-webkit-animation-delay: 2888ms;
		animation-delay: 2888ms;
	}
	
	.meteor:nth-child(12) {
		top: calc(50% - 15px);
		left: calc(50% - 8px);
		-webkit-animation-delay: 388ms;
		animation-delay: 388ms;
	}
	
	.meteor:nth-child(12)::before,
	.meteor:nth-child(12)::after,
	.meteor:nth-child(12)::after {
		-webkit-animation-delay: 388ms;
		animation-delay: 388ms;
	}
	
	.meteor:nth-child(13) {
		top: calc(50% - 155px);
		left: calc(50% - 50px);
		-webkit-animation-delay: 7288ms;
		animation-delay: 7288ms;
	}
	
	.meteor:nth-child(13)::before,
	.meteor:nth-child(13)::after,
	.meteor:nth-child(13)::after {
		-webkit-animation-delay: 7288ms;
		animation-delay: 7288ms;
	}
	
	.meteor:nth-child(14) {
		top: calc(50% - 28px);
		left: calc(50% - 80px);
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}
	
	.meteor:nth-child(14)::before,
	.meteor:nth-child(14)::after,
	.meteor:nth-child(14)::after {
		-webkit-animation-delay: 8888ms;
		animation-delay: 8888ms;
	}
	
	.meteor:nth-child(15) {
		top: calc(50% - 35px);
		left: calc(50% - 200px);
		-webkit-animation-delay: 7588ms;
		animation-delay: 7588ms;
	}
	
	.meteor:nth-child(15)::before,
	.meteor:nth-child(15)::after,
	.meteor:nth-child(15)::after {
		-webkit-animation-delay: 7588ms;
		animation-delay: 7588ms;
	}
	
	.meteor:nth-child(16) {
		top: calc(50% - 40px);
		left: calc(50% - 250px);
		-webkit-animation-delay: 1888ms;
		animation-delay: 1888ms;
	}
	
	.meteor:nth-child(16)::before,
	.meteor:nth-child(16)::after,
	.meteor:nth-child(16)::after {
		-webkit-animation-delay: 1888ms;
		animation-delay: 1888ms;
	}
	
	
	@-webkit-keyframes tail {
		0% {
			width: 0;
		}
	
		30% {
			width: 100px;
		}
	
		100% {
			width: 0;
		}
	}
	
	@keyframes tail {
		0% {
			width: 0;
		}
	
		30% {
			width: 100px;
		}
	
		100% {
			width: 0;
		}
	}
	
	@-webkit-keyframes shining {
		0% {
			width: 0;
		}
	
		50% {
			width: 30px;
		}
	
		1000% {
			width: 0;
		}
	}
	
	@keyframes shining {
		0% {
			width: 0;
		}
	
		50% {
			width: 30px;
		}
	
		1000% {
			width: 0;
		}
	}
	
	@-webkit-keyframes shooting {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	
		100% {
			-webkit-transform: translateX(300px);
			transform: translateX(300px);
		}
	}
	
	@keyframes shooting {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	
		100% {
			-webkit-transform: translateX(300px);
			transform: translateX(300px);
		}
	}
	
	@-webkit-keyframes sky {
		0% {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	
		100% {
			-webkit-transform: rotate(405deg);
			transform: rotate(405deg);
		}
	}
	
	@keyframes sky {
		0% {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	
		100% {
			-webkit-transform: rotate(405deg);
			transform: rotate(405deg);
		}
	}
		
</style>