purchase-let/pageQuota/quotation/index.vue

<template>
	<view class="content">
		<up-sticky bgColor="#fff">
			<view class="head">
				<up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword"
					@custom="searchKeyword"></up-search>
				<view class="">
					<view class="" style="display: flex;justify-content: space-around;margin-top: 24rpx;">
						<view :class="{act: tabIndex==1}" @click="tabIndex=1">
							订单列表
						</view>
						<view :class="{act: tabIndex==2}" @click="tabIndex=2">
							报价记录
						</view>
					</view>
					<view style="height: 8rpx;" />
					<view class="line" :style="{left:tabIndex==1?tabsLeft+'px':tabsRight+'px'}" />
				</view>
			</view>
		</up-sticky>
		<view class="card" v-for="item in 10">
			<view class="card-head">
				<text>PF171504442988969633</text>
				<text style="color:#20B128 ;">待报价</text>
			</view>
			<view class="card-content">
				<image v-for="(item,index) in 10" style="width: 152rpx;height: 152rpx;margin-right: 20rpx;"
					src="../../static/logo.png" mode="">
				</image>
			</view>
			<view class="total">
				<view style="display: flex;align-items: center;">
					共4件 <up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"

	// 搜索
	const keyword = ref('')
	const searchKeyword = () => {
		console.log("sousuo1")
	}
	// 搜索结束

	// tabsindex
	const tabIndex = ref(1)
	const {
		windowWidth
	} = uni.getSystemInfoSync();
	const tabsLeft = ref(((windowWidth / 2) - 26) / 2)
	const tabsRight = ref(tabsLeft.value + (windowWidth / 2))
	// tabsindex结束
</script>

<style lang="scss">
	.content {

		.head {
			padding: 20rpx;
			background-color: white;
			position: relative;

			.act {
				color: #20B128;
			}

			.line {
				width: 26px;
				height: 5rpx;
				background-color: #20B128;
				border-radius: 50rpx;
				position: absolute;
				transition: 300ms;
			}
		}

		.card {
			width: 710rpx;
			margin: 20rpx auto;
			background-color: white;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 16rpx;
			position: relative;

			.card-head {
				display: flex;
				justify-content: space-between;
				margin-bottom: 12rpx;
			}

			.card-content {
				overflow-x: auto;
				white-space: nowrap;
				padding-right: 152rpx;
			}

			.total {
				width: 152rpx;
				height: 160rpx;
				position: absolute;
				border: 1px dashed black;
				display: flex;
				justify-content: space-around;
				align-items: center;
				top: 60rpx;
				right: 20rpx;
				background-color: white;
			}
		}
	}
</style>