完成研究报告页面设计

pages/InvoiceApplication/InvoiceApplication.vue

@@ -548,9 +548,7 @@
 			background-color: $uni-bg-color-grey;
 			border: 1rpx solid #E9E9E9;
 			
-			position: fixed;
-			bottom: 0;
-			width: 100%;
+			@include bottomMagnet();
 			.function-box {
 				display: flex;
 				align-items: center;

pages/order/order.vue

@@ -289,9 +289,8 @@
 			text-align: center;
 			font-size: $uni-title-font-size-2;
 			background-color: $uni-bg-color-grey;
-			position: fixed;
-			bottom: 0;
-			width: 100%;
+			
+			@include bottomMagnet();
 			.button {
 				width: 100%;
 				height: 100rpx;

pages/researchReport/reportHome/reportHome.vue

@@ -1,19 +1,452 @@
 <template>
-	<view>
-		
+	<view class="container">
+		<view v-show="menuCurrent === 0">
+			<view class="menus-box">
+				<view class="menus-item-box">
+					<view class="icon-box">
+						<view class="iconfont icon-hetong"></view>
+					</view>
+					<view class="text-box">
+						二手住宅市场
+					</view>
+				</view>
+				<view class="menus-item-box">
+					<view class="icon-box">
+						<view class="iconfont icon-chengshi"></view>
+					</view>
+					<view class="text-box">
+						住宅租赁市场
+					</view>
+				</view>
+				<view class="menus-item-box">
+					<view class="icon-box">
+						<view class="iconfont icon-zhongjie"></view>
+					</view>
+					<view class="text-box">
+						房地产中介行业
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-show="menuCurrent === 1">
+			<view class="header-box">
+				<view class="search-box">
+					<u-search
+						v-model="searchForm.keyword"
+						:clearabled="true"
+						bg-color="#E5E5E5"
+						:input-style="searchInputStyle"
+						placeholder="搜索您想要的内容"
+					></u-search>
+				</view>
+			</view>
+			<view class="list-box">
+				<view class="list-item-box" v-for="item in list" :key="item.id">
+					<view class="image-box">
+						<image :src="item.image" mode="aspectFill"></image>
+					</view>
+					<view class="info-box">
+						<view class="title">
+							{{item.title}}
+						</view>
+						<view class="time">
+							<span class="iconfont icon-time"></span>
+							<span>{{item.time}}</span>
+						</view>
+						<view class="func">
+							<view v-if="item.free > 0" class="button free">免费</view>
+							<view v-else-if="item.memberFree > 0" class="button member-free">会员免费</view>
+							<view v-else :class="['button', item.status > 0 ? 'free' : 'buy']">{{item.status > 0 ? '已购买' : '立即购买'}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-show="menuCurrent === 2">
+			<view class="header-box">
+				<view class="search-box">
+					<u-search
+						v-model="searchForm.keyword"
+						:clearabled="true"
+						bg-color="#E5E5E5"
+						:input-style="searchInputStyle"
+						placeholder="搜索您想要的内容"
+					></u-search>
+				</view>
+			</view>
+			<view class="list-box">
+				<view class="list-item-box" v-for="item in list2" :key="item.id">
+					<view class="image-box">
+						<image :src="item.image" mode="aspectFill"></image>
+					</view>
+					<view class="info-box">
+						<view class="title">
+							{{item.title}}
+						</view>
+						<view class="time">
+							<span>购买时间:&nbsp;{{item.time}}</span>
+						</view>
+						<view class="func">
+							<view class="price">实付款：{{item.price}}元</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom-block"></view>
+		<view class="bottom-box">
+			<view class="menu-box">
+				<view class="menu-item-box" :class="{'is-active': menuCurrent === 0}" @click="onMenuClick(0)">
+					<view class="iconfont icon-home"></view>
+					<view class="text">首页</view>
+				</view>
+				<view class="menu-item-box" :class="{'is-active': menuCurrent === 1}" @click="onMenuClick(1)">
+					<view class="iconfont icon-time"></view>
+					<view class="text">我的浏览</view>
+				</view>
+				<view class="menu-item-box" :class="{'is-active': menuCurrent === 2}" @click="onMenuClick(2)">
+					<view class="iconfont icon-baogao"></view>
+					<view class="text">我的报告</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				
-			};
-		}
+<script setup>
+	import { ref, computed } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const customButtonStyle = {
+		height: '40rpx',
+		lineHeight: '40rpx',
+		padding: '0 30rpx'
 	}
-</script>
+	const searchInputStyle = {
+		backgroundColor: '#E5E5E5'
+	}
+	const searchForm = ref({
+		keyword: '',
+		type: 0
+	})
+	
+	const menuCurrent = ref(0)
+	function onMenuClick(index) {
+		menuCurrent.value = index
+	}
+	
+	const list = [
+		{
+			id: '01',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/21/1697901453723364.png',
+			free: 0, // 是否免费
+			memberFree: 0, // 是否会员免费
+			status: 0, // 是否购买
+		},
+		{
+			id: '02',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/12/13/1702403646894275.png',
+			free: 0, // 是否免费
+			memberFree: 0, // 是否会员免费
+			status: 1, // 是否购买
+		},
+		{
+			id: '03',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/16/1697397333933789.png',
+			free: 1, // 是否免费
+			memberFree: 0, // 是否会员免费
+			status: 0, // 是否购买
+		},
+		{
+			id: '04',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/24/1698106006242859.png',
+			free: 0, // 是否免费
+			memberFree: 1, // 是否会员免费
+			status: 0, // 是否购买
+		},
+		{
+			id: '05',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://static.fxbaogao.com/subject/cover/prod/361.jpg',
+			free: 0, // 是否免费
+			memberFree: 1, // 是否会员免费
+			status: 0, // 是否购买
+		},
+		{
+			id: '06',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/16/1697387221220874.png',
+			free: 0, // 是否免费
+			memberFree: 1, // 是否会员免费
+			status: 1, // 是否购买
+		},
+		{
+			id: '07',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/21/1697901453723364.png',
+			free: 0, // 是否免费
+			memberFree: 0, // 是否会员免费
+			status: 0, // 是否购买
+		},
+		{
+			id: '08',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/12/13/1702403646894275.png',
+			free: 0, // 是否免费
+			memberFree: 0, // 是否会员免费
+			status: 0, // 是否购买
+		},
+	]
+	
+	const list2 = [
+		{
+			id: '01',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/21/1697901453723364.png',
+			price: '9.9'
+		},
+		{
+			id: '02',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/12/13/1702403646894275.png',
+			price: '9.9'
+		},
+		{
+			id: '03',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/16/1697397333933789.png',
+			price: '9.9'
+		},
+		{
+			id: '04',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/24/1698106006242859.png',
+			price: '9.9'
+		},
+		{
+			id: '05',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://static.fxbaogao.com/subject/cover/prod/361.jpg',
+			price: '9.9'
+		},
+		{
+			id: '06',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/16/1697387221220874.png',
+			price: '9.9'
+		},
+		{
+			id: '07',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/10/21/1697901453723364.png',
+			price: '9.9'
+		},
+		{
+			id: '08',
+			title: '2024年11月广州市中介促成二手住宅市场交易简报',
+			time: '2023年8月8日',
+			image: 'https://img.shetu66.com/2023/12/13/1702403646894275.png',
+			price: '9.9'
+		},
+	]
+	
+	onLoad((load) => {
+		if (load.menuCurrent) {
+			menuCurrent.value = Number(load.menuCurrent)
+		}
+	})
 
-<style lang="scss">
+</script>
 
+<style lang="scss" scoped>
+	$image-width: 230rpx;
+	
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-text-color-inverse;
+		
+		.header-box {
+			padding: 0 20rpx;
+			background-color: $uni-text-color-inverse;
+			@include topMagnet();
+		}
+		
+		.search-box {
+			margin-bottom: 20rpx;
+			::v-deep(.u-search) {
+				background-color: #e5e5e5;
+				border-radius: 50rpx;
+				
+				.u-action {
+					width: 18%;
+					background-color: $uni-color-primary;
+					border-radius: 50rpx;
+					color: $uni-text-color-inverse;
+					margin-right: 8rpx;
+					font-size: 28rpx;
+					line-height: 50rpx;
+					letter-spacing: 3rpx;
+					text-align: center;
+				}
+			}
+		}
+		
+		.list-box {
+			padding: 0 20rpx;
+			.list-item-box {
+				padding: 30rpx 20rpx;
+				display: flex;
+				gap: 20rpx;
+				height: 210rpx;
+				border-bottom: 5rpx solid #E6E6E6;
+				&:active {
+					background-color: $uni-bg-color-hover;
+				}
+				.image-box {
+					width: $image-width;
+					image {
+						width: $image-width;
+						flex: 0 0 $image-width;
+						height: 100%;
+						border-radius: $uni-card-border-radius;
+					}
+				}
+				.info-box {
+					.title {
+						font-size: $uni-title-font-size-2;
+						font-weight: bold;
+						line-height: 40rpx;
+						margin-bottom: 15rpx;
+						@include text-line-overflow(2);
+					}
+					.time {
+						font-size: $uni-font-size-2;
+						color: $uni-text-color-grey;
+						.iconfont {
+							font-size: $uni-font-size-2;
+							padding-right: 10rpx;
+						}
+					}
+					.func {
+						display: flex;
+						justify-content: flex-end;
+						font-size: $uni-font-size-2;
+						font-weight: bold;
+						.button {
+							text-align: center;
+							width: 130rpx;
+						}
+						.price {
+							color: $uni-color-error;
+							font-size: $uni-title-font-size-2;
+						}
+						.buy {
+							padding: 6rpx 25rpx;
+							background-color: $uni-color-error;
+							border-radius: $uni-card-border-radius;
+							color: $uni-text-color-inverse;
+						}
+						.free {
+							padding: 6rpx 25rpx;
+							background-color: $uni-color-primary;
+							border-radius: $uni-card-border-radius;
+							color: $uni-text-color-inverse;
+						}
+						.member-free {
+							padding: 10rpx 20rpx;
+							@include backgroundImg('@/static/images/bg-label.png');
+							color: $uni-text-color;
+						}
+					}
+				}
+			}
+		}
+		
+		.menus-box {
+			padding: 0 20rpx;
+			.menus-item-box {
+				width: 100%;
+				padding: 35rpx 50rpx;
+				margin-bottom: 35rpx;
+				display: flex;
+				gap: 30rpx;
+				align-items: center;
+				background-color: #006AF4;
+				border-radius: $uni-card-border-radius;
+				&:active {
+					background-color: #005AF4;
+				}
+				.icon-box {
+					width: 40%;
+					text-align: center;
+					width: 100rpx;
+					height: 100rpx;
+					line-height: 100rpx;
+					text-align: center;
+					border-radius: 50%;
+					border: 3rpx solid $uni-text-color-inverse;
+					background-color: #004DC9;
+					.iconfont {
+						font-size: 60rpx;
+						color: $uni-text-color-inverse;
+					}
+				}
+				.text-box {
+					font-size: 50rpx;
+					font-weight: bold;
+					color: $uni-text-color-inverse;
+				}
+			}
+		}
+		
+		.bottom-block {
+			height: 112rpx;
+		}
+		.bottom-box {
+			padding: 5rpx 20rpx;
+			background-color: $uni-bg-color-grey;
+			border: 1rpx solid #E9E9E9;
+			
+			@include bottomMagnet();
+			
+			.menu-box {
+				height: 100rpx;
+				display: flex;
+				align-items: center;
+				.menu-item-box {
+					width: calc(100% / 3);
+					text-align: center;
+					.iconfont {
+						font-size: 55rpx;
+					}
+					.text {
+						font-size: $uni-font-size-2;
+					}
+				}
+				.is-active {
+					color: $uni-color-primary;
+				}
+			}
+		}
+	}
 </style>

static/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4808041 */
-  src: url('./static/fonts/iconfont.woff2?t=1736921813084') format('woff2'),
-       url('./static/fonts/iconfont.woff?t=1736921813084') format('woff'),
-       url('./static/fonts/iconfont.ttf?t=1736921813084') format('truetype');
+  src: url('./static/fonts/iconfont.woff2?t=1739242348416') format('woff2'),
+       url('./static/fonts/iconfont.woff?t=1739242348416') format('woff'),
+       url('./static/fonts/iconfont.ttf?t=1739242348416') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zhongjie:before {
+  content: "\e618";
+}
+
+.icon-baogao:before {
+  content: "\eb66";
+}
+
+.icon-hetong:before {
+  content: "\e662";
+}
+
+.icon-chengshi:before {
+  content: "\e63c";
+}
+
+.icon-sangedian-copy:before {
+  content: "\e600";
+}
+
 .icon-success-filling:before {
   content: "\e68b";
 }

static/fonts/iconfont.json

@@ -6,6 +6,41 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "3289010",
+      "name": "中介管理",
+      "font_class": "zhongjie",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "3868276",
+      "name": "报告",
+      "font_class": "baogao",
+      "unicode": "eb66",
+      "unicode_decimal": 60262
+    },
+    {
+      "icon_id": "5343856",
+      "name": "我的合同",
+      "font_class": "hetong",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "10184306",
+      "name": "城市",
+      "font_class": "chengshi",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "11116681",
+      "name": "三个点",
+      "font_class": "sangedian-copy",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
       "icon_id": "15838611",
       "name": "success-filling",
       "font_class": "success-filling",