Merge branch 'Branch_1' of https://git.u8t.cn/tangxinyue/alipay-emulator into Branch_1

pages/index/index.nvue

@@ -286,7 +286,7 @@ const otherList = [{
 {
 	icon: "/static/image/other/certificate/certificate.png",
 	name: "证书",
-	path: "/pages/other/certificate/graduate"
+	path: "/pages/other/certificate/index"
 },
 {
 	icon: "/static/image/other/silkBanner/silkBanner.png",

pages/other/certificate/graduate.vue

@@ -3,14 +3,12 @@
 		<!-- 自定义头部导航栏 -->
 		<ZdyNavbar @right-click="edit" isRightButton rightButtonText="编辑" :title="data.navbar.title"
 			:bgColor="data.navbar.bgColor" :isBack="true" />
-		<scroll-view scroll-x="true" class="footer-btn" :show-scrollbar="false">
 			<view class="footer-box">
-				<view class="btn" v-for="(item, index) in data.typeList" :key="index" :class="{ active: data.type == index }"
+				<view class="btn" v-for="(item, index) in data.typeList" :key="index" :class="{ active: data.type == getType(index) }"
 					@click="setType(index)">
 					{{ item }}
 				</view>
 			</view>
-		</scroll-view>
 		<view style="display: flex;align-items: center;background: #fff;border-radius: 6px;margin: 10px;padding: 4px;color: #767676;">
 			<image src="/static/image/other/notice.png" style="width: 16px;height: 16px;margin-right: 10rpx;margin-left: 10rpx;"></image>
 			此功能不具备真实性，仅供娱乐
@@ -555,6 +553,7 @@
 		proxy
 	} = getCurrentInstance();
 	const data = reactive({
+		styleType:0,
 		type: 0,
 		graduate: {
 			type: 0,
@@ -599,14 +598,14 @@
 		textCssLeft: 'text-align: left;',
 		textCssCenter: 'text-align: center;',
 		typeList: [
-			'毕业证书样式1',
+			'样式一',//毕业证书
-			'毕业证书样式2',
+			'样式二',//毕业证书
 			'情侣证',
 			'分手证',
-			'奖状样式1',
+			'样式一',//奖状样式
-			'奖状样式2',
+			'样式二',//奖状样式
-			'女神证',
+			'样式一',//女神证
-			'男神证',
+			'样式二',//男神证
 		]
 	})
 
@@ -614,9 +613,39 @@
 	const showEditPopup = ref(false);
 	const editForm = ref({});
 	onLoad((option) => {
-		uni.showLoading({
+		data.styleType=option.styleType||0
-			title: "生成中"
+		if(data.styleType==0){
-		})
+			data.typeList=[
+				'样式一',//毕业证书
+				'样式二',//毕业证书
+			]
+			setType(0)
+		}else if(data.styleType==1){
+			data.typeList=['情侣证',]
+			data.type=2
+			setType(0)
+		}else if(data.styleType==2){
+			data.typeList=['分手证',]
+			data.type=3
+			setType(0)
+		}else if(data.styleType==3){
+			data.typeList=[
+				'样式一',//奖状样式
+				'样式二',//奖状样式
+			]
+			data.type=4
+			setType(0)
+		}else{
+			data.type=6
+			data.typeList=[
+				'样式一',//女神证
+				'样式二',//男神证
+			]
+			setType(0)
+		}
+		// uni.showLoading({
+		// 	title: "生成中"
+		// })
 		// 进入毕业证书页面埋点
 		proxy.$apiUserEvent('all', {
 			type: 'event',
@@ -624,10 +653,10 @@
 			prefix: '.uni.other.',
 			value: "证书"
 		})
-		let graduateData = uni.getStorageSync("graduateData")
+		// let graduateData = uni.getStorageSync("graduateData")
-		if (graduateData) {
+		// if (graduateData) {
-			data.graduate = graduateData
+		// 	data.graduate = graduateData
-		}
+		// }
 		uni.$on("editFormPhoto", (info) => {
 			data.code = ""
 			if(data.type==2||data.type==3){
@@ -715,6 +744,17 @@
 	})
 
 	function setType(index) {
+		if(data.styleType==0){
+			
+		}else if(data.styleType==1){
+			index+=2
+		}else if(data.styleType==2){
+			index+=3
+		}else if(data.styleType==3){
+			index+=4
+		}else{
+			index+=6
+		}
 		uni.showLoading({
 			title: "生成中"
 		})
@@ -803,7 +843,20 @@
 			editForm.value.icon = '/static/image/other/certificate/graduate/icon1.png';
 		}
 	}
-
+	 const getType = (index) => {
+		switch (Number(data.styleType)) {
+			case 0:
+				return index
+			case 1:
+				return index + 2
+			case 2:
+				return index + 3
+			case 3:
+				return index + 4
+			default:
+				return index + 6
+		}
+	}
 	function successImage(e) {
 		data.code = e
 		uni.hideLoading()
@@ -1291,33 +1344,29 @@
 		box-shadow: 0 2rpx 6rpx rgba(7, 140, 193, 0.3);
 	}
 
-	.footer-btn {
-		width: 100vw;
-		overflow-x: auto;
-		white-space: nowrap;
-
 	.footer-box {
-			display: inline-flex;
+		position: fixed;
-			padding: 10rpx 0;
+		left: 0;
-
+		bottom: 16px;
+		width: 100vw;
+		display: flex;
+		justify-content: center;
 		.btn {
-				padding: 8rpx 10rpx;
+			font-size: 18px;
+			color: #767676;
+			width: 94px;
+			height: 50px;
+			line-height: 50px;
+			background: #FFFFFF;
+			border-radius: 8px 8px 8px 8px;
 			background: #FFFFFF;
-				border-radius: 12px;
 			text-align: center;
 			margin: 0 24rpx;
 			color: #767676;
-				font-size: 12px;
-				// border: 2px solid #FFFFFF;
-				min-width: 120rpx;
 		}
-
 		.active {
 			color: #1777FF;
-				// border: 2px solid #1777FF;
+			border: 2px solid #1777FF;
 		}
 	}
-
-
-	}
 </style>

pages/other/certificate/index.vue

@@ -1,57 +1,129 @@
 <template>
 	<view class="container">
-		<!-- 自定义头部导航栏 -->
+		<ZdyNavbar :title="data.navbar.title" :bgColor="data.navbar.bgColor" :isAdd="true" :isSearch="$system=='Android'">
-<!-- 		<ZdyNavbar  :title="data.navbar.title"  :bgColor="data.navbar.bgColor" :isAdd="true" :isSearch="$system=='Android'">
+		</ZdyNavbar>
-		</ZdyNavbar> -->
 
+		<view class="card-grid">
+			<view class="card" v-for="(item, index) in cardList" :key="index">
+				<view class="title">
+					{{item.title}}
+				</view>
+				<image :src="item.img" class="card-img"  />
+				<button class="card-btn" @click="create(index)">立即制作</button>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup>
-	// 自定义头部
+	import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
-	// import ZdyNavbar from "@/components/navbar/navbar.vue"
 
 	import {
 		ref,
-		reactive,
+		reactive
-		watch,
+	} from 'vue'
-		nextTick,
-		getCurrentInstance
-	} from "vue";
-	import {
-		onLoad,
-		onShow,
-		onReady,
-		onPullDownRefresh,
-		onReachBottom
-	} from "@dcloudio/uni-app";
-	const {
-		appContext,
-		proxy
-	} = getCurrentInstance();
 	const data = reactive({
 		navbar: {
-			title: "微信",
+			title: '证件选择',
-			bgColor: '#EDEDED',
+			bgColor: ''
 		}
 	})
-	onLoad((option) => {
+	const cardList = ref([
-	})
+		{
-	onReady(()=>{
+			title: '身份证',
+			img: '/static/image/other/certificate/certificate1.png',
+		},
+		{
+			title: '毕业证',
+			img: '/static/image/other/certificate/certificate2.png',
+		},
+		{
+			title: '情侣证',
+			img: '/static/image/other/certificate/certificate3.png',
+		},
+		{
+			title: '分手证',
+			img: '/static/image/other/certificate/certificate4.png',
+		},
+		{
+			title: '奖状',
+			img: '/static/image/other/certificate/certificate5.png',
+		},
+		{
+			title: '颜值证',
+			img: '/static/image/other/certificate/certificate6.png',
+		},
+	])
+	function create(index){
+		if(index){
 		
+			uni.navigateTo({
+				url:'/pages/other/certificate/graduate?styleType='+(index-1)
 			})
-	onShow(() => {})
+		}else{
-	onPullDownRefresh(() => {
+			uni.navigateTo({
-		setTimeout(() => {
+				url:'/pages/other/card/card'
-			uni.stopPullDownRefresh();
-		}, 1000);
-	})
-	onReachBottom(() => {
-
 			})
+		}
 		
+	}
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+	.container {
+		padding: 20rpx;
+		background-color: #F0F4F9;
+		min-height: 100vh;
+	}
 
+
+
+	.card-grid {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+
+	.card {
+		width: 48%;
+		background-color: #fff;
+		border-radius: 20rpx;
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+		align-items: center;
+		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+	}
+.title{
+	font-size: 14px;
+	color: #1A1A1A;
+	line-height: 14px;
+}
+	.card-img {
+		width: 130px;
+		height: 80px;
+		/* border-radius: 8px 8px 8px 8px; */
+		margin-top: 21px;
+		margin-bottom: 18px;
+	}
+
+
+	.card-btn {
+		width: 68px;
+		height: 28px;
+		background: linear-gradient(327deg, #1777FF 0%, #17CDFF 100%);
+		border-radius: 8px 8px 8px 8px;
+		font-size: 12px;
+		color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	button{
+		padding: 0;
+		margin: 0;
+		border: none;
+	}
 </style>

pages/other/silkBanner/silkBanner.vue

@@ -3,16 +3,16 @@
 		<!-- 自定义头部导航栏 -->
 		<ZdyNavbar @right-click="edit" isRightButton rightButtonText="编辑" :title="data.navbar.title"
 			:bgColor="data.navbar.bgColor" :isBack="true" />
-		<scroll-view scroll-x="true" class="footer-btn" :show-scrollbar="false">
 		<view class="footer-box">
 			<view class="btn" v-for="(item, index) in data.typeList" :key="index" :class="{ active: data.type == index }"
 				@click="setType(index)">
-					{{ item }}
+				样式一
 			</view>
 		</view>
-		</scroll-view>
+		<view
-		<view style="display: flex;align-items: center;background: #fff;border-radius: 6px;margin: 10px;padding: 4px;color: #767676;">
+			style="display: flex;align-items: center;background: #fff;border-radius: 6px;margin: 10px;padding: 4px;color: #767676;">
-			<image src="/static/image/other/notice.png" style="width: 16px;height: 16px;margin-right: 10rpx;margin-left: 10rpx;"></image>
+			<image src="/static/image/other/notice.png"
+				style="width: 16px;height: 16px;margin-right: 10rpx;margin-left: 10rpx;"></image>
 			此功能不具备真实性，仅供娱乐
 		</view>
 		<image :src="data.code" mode="widthFix" style="width:calc( 100vw - 24px);margin:0 12px;" @click="previewImage">
@@ -27,46 +27,46 @@
 					:css="`width:351px;height:460px;background-image: url('/static/image/other/silkBanner/banner1.png');position: relative;`">
 					<!-- 落款日期 -->
 					<l-painter-view :css="`position: absolute;left:85px;bottom:94px;`">
-						<l-painter-text :css="data.textCss" :text="data.banner.dateText" />
+						<l-painter-text :css="data.textFont+data.textCss" :text="data.banner.dateText" />
 					</l-painter-view>
 					<!-- 敬赠落款 -->
-					<l-painter-view :css="`position: absolute;left:105px;bottom:94px;`">
+					<l-painter-view :css="`position: absolute;left:100px;bottom:94px;`">
-						<l-painter-text :css="data.textCss" :text="data.banner.donorLine" />
+						<l-painter-text :css="data.textFont+data.textCss" :text="data.banner.donorLine" />
 					</l-painter-view>
 					<!-- 受赠对象 -->
 					<l-painter-view :css="`position: absolute;top:86px;right:74px;`">
-						<l-painter-text :css="data.textCss" :text="data.banner.recipientLine" />
+						<l-painter-text :css="data.textFont+data.textCss" :text="data.banner.recipientLine" />
 					</l-painter-view>
 					<!-- 中心大字 -->
 					<l-painter-view :css="`position: absolute;top:86px;left:171px;`">
-						<l-painter-text :css="data.textCss1" :text="data.banner.centerChar" />
+						<l-painter-text :css="data.textFont+data.textCss1" :text="data.banner.centerChar" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;top:112px;left:124px;`">
-						<l-painter-text :css="data.textCss1" :text="data.banner.centerChar" />
+						<l-painter-text :css="data.textFont+data.textCss1" :text="data.banner.centerChar" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;top:112px;right:116px;`">
-						<l-painter-text :css="data.textCss1" :text="data.banner.centerChar" />
+						<l-painter-text :css="data.textFont+data.textCss1" :text="data.banner.centerChar" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;top:155px;left:107px;`">
-						<l-painter-text :css="data.textCss1" :text="data.banner.centerChar" />
+						<l-painter-text :css="data.textFont+data.textCss1" :text="data.banner.centerChar" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;top:155px;right:101px;`">
-						<l-painter-text :css="data.textCss1" :text="data.banner.centerChar" />
+						<l-painter-text :css="data.textFont+data.textCss1" :text="data.banner.centerChar" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;top:198px;left:141px;`">
-						<l-painter-text :css="data.textCss1" :text="data.banner.centerChar" />
+						<l-painter-text :css="data.textFont+data.textCss1" :text="data.banner.centerChar" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;top:198px;right:126px;`">
-						<l-painter-text :css="data.textCss1" :text="data.banner.centerChar" />
+						<l-painter-text :css="data.textFont+data.textCss1" :text="data.banner.centerChar" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;top:112px;left:142px;`">
-						<l-painter-text :css="data.textCss2" :text="data.banner.centerChar" />
+						<l-painter-text :css="data.textFont+data.textCss2" :text="data.banner.centerChar" />
 					</l-painter-view>
-					<l-painter-view :css="`position: absolute;bottom:170px;left:10px;`">
+					<l-painter-view :css="`position: absolute;bottom:165px;left:10px;`">
-						<l-painter-text :css="data.textCss3" :text="data.banner.phraseTop" />
+						<l-painter-text :css="data.textFont+data.textCss3" :text="data.banner.phraseTop" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;bottom:118px;left:10px;`">
-						<l-painter-text :css="data.textCss3" :text="data.banner.phraseBottom" />
+						<l-painter-text :css="data.textFont+data.textCss3" :text="data.banner.phraseBottom" />
 					</l-painter-view>
 
 					<l-painter-view v-if="$isVip()" :css="`position: absolute;left:117px;bottom:127px;`">
@@ -80,22 +80,22 @@
 					:css="`width:351px;height:460px;background-image: url('/static/image/other/silkBanner/banner2.png');position: relative;`">
 					<!-- 落款日期 -->
 					<l-painter-view :css="`position: absolute;left:85px;bottom:94px;`">
-						<l-painter-text :css="data.textCss" :text="data.banner.dateText" />
+						<l-painter-text :css="data.textFont+data.textCss" :text="data.banner.dateText" />
 					</l-painter-view>
 					<!-- 敬赠落款 -->
-					<l-painter-view :css="`position: absolute;left:105px;bottom:94px;`">
+					<l-painter-view :css="`position: absolute;left:100px;bottom:94px;`">
-						<l-painter-text :css="data.textCss" :text="data.banner.donorLine" />
+						<l-painter-text :css="data.textFont+data.textCss" :text="data.banner.donorLine" />
 					</l-painter-view>
 					<!-- 受赠对象 -->
 					<l-painter-view :css="`position: absolute;top:86px;right:74px;`">
-						<l-painter-text :css="data.textCss" :text="data.banner.recipientLine" />
+						<l-painter-text :css="data.textFont+data.textCss" :text="data.banner.recipientLine" />
 					</l-painter-view>
 
 					<l-painter-view :css="`position: absolute;top:102px;right:131px;`">
-						<l-painter-text :css="data.textCss4" :text="data.banner.phraseTop" />
+						<l-painter-text :css="data.textFont+data.textCss4" :text="data.banner.phraseTop" />
 					</l-painter-view>
 					<l-painter-view :css="`position: absolute;top:102px;left:142px;`">
-						<l-painter-text :css="data.textCss4" :text="data.banner.phraseBottom" />
+						<l-painter-text :css="data.textFont+data.textCss4" :text="data.banner.phraseBottom" />
 					</l-painter-view>
 
 					<l-painter-view v-if="$isVip()" :css="`position: absolute;left:117px;bottom:127px;`">
@@ -191,14 +191,16 @@
 		// 返回对应 type 的数据，如果没有则返回默认 type 1
 		return banners[type] || banners[1]
 	}
+
 	function mergeBanner(raw, type) {
 		return Object.assign(defaultBanner(type), raw && typeof raw === 'object' ? raw : {})
 	}
 
 	const data = reactive({
+		isShow:false,
 		type: 0,
 		banner: mergeBanner(null, 0),
-		shuaxing: true,
+		shuaxing: false,
 		navbar: {
 			title: "锦旗",
 			bgColor: '#EDEDED',
@@ -206,13 +208,13 @@
 		width: 800,
 		height: 600,
 		code: '',
-		textCss: 'text-align: center;font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;width:10px;color:#FFDD6D;font-size:10px; mix-blend-mode: overlay;',
+		textCss: 'text-align: center;font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;width:10px;color:#FFDD6D;font-size:10px; mix-blend-mode: overlay;',
 
-		textCss1: 'font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;color:#FFDD6D;font-size:20px; mix-blend-mode: overlay;',
+		textCss1: 'font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;color:#FFDD6D;font-size:20px; mix-blend-mode: overlay;',
-		textCss2: 'font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;color:#FFDD6D;font-size:80px; mix-blend-mode: overlay;',
+		textCss2: 'font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;color:#FFDD6D;font-size:80px; mix-blend-mode: overlay;',
-		textCss3: 'text-align: center;width:351px;font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;color:#FFDD6D;font-size:30px; mix-blend-mode: overlay;',
+		textCss3: 'text-align: center;width:351px;font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;color:#FFDD6D;font-size:30px; mix-blend-mode: overlay;',
-		textCss4: 'text-align: center;width:20px;font-weight: bold;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;font-family: "SimSun", "宋体", sans-serif;color:#FFDD6D;font-size:40px; mix-blend-mode: overlay;',
+		textCss4: 'text-align: center;width:20px;font-weight: 400;word-spacing: 50px;letter-spacing: 20px;word-spacing: 20px;color:#FFDD6D;font-size:40px; mix-blend-mode: overlay;',
-		textFont:'font-family:"certificate";',
+		textFont: 'font-family:"certificate2";',
 		typeList: ['样式1', '样式2']
 	})
 
@@ -226,7 +228,7 @@
 		// 进入锦旗页面埋点
 		proxy.$apiUserEvent('all', {
 			type: 'event',
-			key: 'certificate',
+			key: 'silkBanner',
 			prefix: '.uni.other.',
 			value: "锦旗"
 		})
@@ -235,19 +237,23 @@
 		console.log("---config---", config);
 		const font = config.config['client.uniapp.font']
 
-		console.log("字体地址信息", font.certificate);
+		console.log("字体地址信息", font.certificate2);
 		// Font loading logic
-		const fontUrl = font.certificate;
+		const fontUrl = font.certificate2;
-		const fontName = 'certificate';
+		const fontName = 'certificate2';
 
 		const loadFont = (path) => {
 			uni.loadFontFace({
 				family: fontName,
 				source: `url("${path}")`,
 				success() {
+					data.isShow=true
+					data.shuaxing=true
 					console.log('字体加载成功');
 				},
 				fail(err) {
+					data.isShow=true
+					data.shuaxing=true
 					console.error('字体加载失败', err);
 				}
 			});
@@ -272,7 +278,7 @@
 							tempFilePath: res.tempFilePath,
 							success: (saveRes) => {
 								const savedPath = saveRes.savedFilePath;
-								uni.setStorageSync('certificate_font_path', savedPath);
+								uni.setStorageSync('certificate2_font_path', savedPath);
 								console.log("字体保存路径", savedPath);
 								loadFont(savedPath);
 							},
@@ -303,7 +309,6 @@
 	onReachBottom(() => {
 
 	})
-
 	function setType(index) {
 		uni.showLoading({
 			title: "生成中"
@@ -618,7 +623,7 @@
 
 	.popup-title {
 		font-size: 32rpx;
-		font-weight: bold;
+		font-weight: 400;
 		color: #333;
 	}
 
@@ -641,7 +646,7 @@
 
 	.section-title {
 		font-size: 28rpx;
-		font-weight: bold;
+		font-weight: 400;
 		color: #333;
 		margin-bottom: 20rpx;
 		display: block;
@@ -682,7 +687,7 @@
 	.form-total-input {
 		background-color: #f9f9f9;
 		color: #ff6b35;
-		font-weight: bold;
+		font-weight: 400;
 	}
 
 	/* 上传图片样式 */
@@ -758,7 +763,7 @@
 		padding: 18rpx 60rpx;
 		border-radius: 50rpx;
 		font-size: 26rpx;
-		font-weight: bold;
+		font-weight: 400;
 		box-shadow: 0 3rpx 10rpx rgba(7, 66, 193, 0.3);
 		transition: all 0.3s ease;
 		text-align: center;
@@ -769,39 +774,33 @@
 		transform: translateY(-2rpx);
 		box-shadow: 0 4rpx 12rpx rgba(7, 72, 193, 0.4);
 	}
-
 	.btn-save-image:active {
 		transform: translateY(0);
 		box-shadow: 0 2rpx 6rpx rgba(7, 140, 193, 0.3);
 	}
-
-	.footer-btn {
-		width: 100vw;
-		overflow-x: auto;
-		white-space: nowrap;
-
 	.footer-box {
-			display: inline-flex;
+		position: fixed;
-			padding: 10rpx 0;
+		left: 0;
-
+		bottom: 16px;
+		width: 100vw;
+		display: flex;
+		justify-content: center;
 		.btn {
-				padding: 8rpx 10rpx;
+			font-size: 18px;
+			color: #767676;
+			width: 94px;
+			height: 50px;
+			line-height: 50px;
+			background: #FFFFFF;
+			border-radius: 8px 8px 8px 8px;
 			background: #FFFFFF;
-				border-radius: 12px;
 			text-align: center;
 			margin: 0 24rpx;
 			color: #767676;
-				font-size: 12px;
-				// border: 2px solid #FFFFFF;
-				min-width: 120rpx;
 		}
-
 		.active {
 			color: #1777FF;
-				// border: 2px solid #1777FF;
+			border: 2px solid #1777FF;
 		}
 	}
-
-
-	}
 </style>