浏览代码

feat(cjx): 添加超吉炫小程序错误页面

- 新增 error.vue 页面,用于展示错误信息
- 页面设计与超吉炫小程序风格保持一致
- 动态显示错误消息,可通过 URL 参数传递
mws 4 月之前
父节点
当前提交
491d15aaa3
共有 1 个文件被更改,包括 167 次插入0 次删除
  1. 167 0
      pages/cjx/error.vue

+ 167 - 0
pages/cjx/error.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="intro-page common">
+		<view class="top-class"></view>
+		<view class="title">
+			超吉炫
+		</view>
+		<view class="head">
+			<u-row class="row-class">
+				<u-col span="4">
+					<image class="logo-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo.png" mode="aspectFit" />
+				</u-col>
+				<u-col span="4">
+					<image class="commodity-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/commodity.png" mode="aspectFit" />
+				</u-col>
+				<u-col span="4">
+					 <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png"  />	
+				</u-col>
+			</u-row>
+		</view>
+		<view class="topImg">
+			 <image class="img_1" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg.png" mode="heightFix" />	
+		</view>
+		<view class="topImg">
+			 <image class="img_2" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg_2.png" mode="heightFix" />	
+		</view>
+		<!-- 公司简介内容卡片 -->
+		<view class="content">
+			<view class="title-1">
+		
+			</view>
+		
+			<view class="detail">
+				 <view class="" style="color: #fff;">
+					{{msg}}
+				 </view>	
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+
+	export default {
+		data() {
+		  return {
+		    msg: "未知错误"
+		  }
+		},
+		onLoad: function(options) {
+		  if (options.msg){
+		    this.msg = options.msg;
+		  }
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import url('../../static/scss/common_cjx.css');
+
+
+	.theme-text {
+		height: 10vh;
+		text-align: center;
+		line-height: 11vh;
+
+		.textImage {
+			height: 80rpx;
+			width: 400rpx;
+		}
+	}
+
+	.intro-card {
+		margin: 0 32rpx;
+		padding: 32rpx 24rpx 24rpx 24rpx;
+		background: rgba(131, 100, 71, 0.5);
+		border-radius: 10rpx;
+
+
+		.intro-view {
+			border: 1px solid #341B10;
+			padding: 10px;
+			margin: 10px;
+			position: relative;
+			
+
+			.intro-label {
+				background-image:
+					url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/label.png");
+				/* 使用绝对路径 */
+				background-size: contain;
+				background-repeat: no-repeat;
+				width: 220rpx;
+				height: 120rpx;
+				position: absolute;
+				margin-top: -70rpx;
+				align-content: center;
+
+				.label-title {
+					font-weight: bold;
+					font-size: 30rpx;
+					color: #341B10;
+					text-align: center;
+					margin-left: 10px;
+					height: 120rpx;
+					line-height: 110rpx;
+				}
+			}
+
+			.intro-content {
+				font-size: 28rpx;
+				color: #5c4322;
+				line-height: 1.8;
+				margin: 20rpx 0px;
+				text-align: justify;
+				height: 50vh;
+				align-content: center;
+			}
+
+			.company-img {
+				width: 100%;
+				height: 260rpx;
+				border-radius: 12rpx;
+				object-fit: cover;
+				margin-top: 10rpx;
+				background: #eee;
+			}
+		}
+
+	}
+	.winning-picture{
+		height: 480rpx;
+		background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiZj.png);
+		background-size: contain;
+		background-position: center;
+		background-repeat: no-repeat;
+		align-content: center;
+		text-align: center;
+	}
+	
+	.center-image {
+		height: 100rpx;
+	    object-fit: contain;     /* 保持图片的宽高比,确保不会被拉伸或裁切 */
+		padding-top: 140rpx;
+	}
+	
+	.content {
+		height: 52vh;
+		border-radius: 10rpx;
+		margin: 20rpx 40rpx;
+		padding: 10rpx 24rpx;
+		overflow: auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-image:
+			url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/cardBgi.png");
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+	
+
+</style>