Browse Source

style:样式修改

李书文 1 year ago
parent
commit
ae36b37169
12 changed files with 640 additions and 186 deletions
  1. 54 50
      App.vue
  2. 533 0
      common/style.scss
  3. 47 62
      pages.json
  4. BIN
      static/tab/dd.png
  5. BIN
      static/tab/dd_s.png
  6. BIN
      static/tab/sy.png
  7. BIN
      static/tab/sy_s.png
  8. BIN
      static/tab/wd.png
  9. BIN
      static/tab/wds.png
  10. BIN
      static/tab/xx.png
  11. BIN
      static/tab/xxs.png
  12. 6 74
      uni.scss

+ 54 - 50
App.vue

@@ -1,56 +1,60 @@
 <script>
-	export default {
-		onLaunch: function() {
-			//#ifdef APP-PLUS
-			//获取已保存在本地的用户信息,该内容在登录页面登录成功之后,才保存到本地的
-			const userInfo = uni.getStorageSync('token');
-			if (userInfo) {
-				uni.reLaunch({
-					url: "/pages/index/index",
-				})
-			} else {
-				uni.navigateTo({
-					url: '/pages/login/login'
-				});
-			}
-			//#endif
-		},
-		onShow: function() {
-			//this.getAuth();
-		},
-		onHide: function() {},
-		methods: {
-
+export default {
+	onLaunch: function () {
+		//#ifdef APP-PLUS
+		//获取已保存在本地的用户信息,该内容在登录页面登录成功之后,才保存到本地的
+		const userInfo = uni.getStorageSync('token');
+		if (userInfo) {
+			uni.reLaunch({
+				url: '/pages/index/index'
+			});
+		} else {
+			uni.navigateTo({
+				url: '/pages/login/login'
+			});
 		}
-	}
+		//#endif
+	},
+	onShow: function () {
+		//this.getAuth();
+	},
+	onHide: function () {},
+	methods: {}
+};
 </script>
 
 <style lang="scss">
-	/*每个页面公共css */
-
-	/* uView基础样式 */
-	@import "uview-ui/index.scss";
-
-
-	//全局页面背景色
-	page{
-		background-color: #e2e2e2;
-		font-family: '宋体';
-		padding: 10px;
-	}
-
-	// 点击时背景灰色
-	// .hover-class{
-	// 	background-color: #f7f7f7!important;
-	// }
-	//底部安全距离
-	.bottom-safety {
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-	}
+/*每个页面公共css */
+@import '@/common/style.scss';
+/* uView基础样式 */
+@import 'uview-ui/index.scss';
 
-	//全局白色背景
-	.bgc-f {
-		background-color: #ffffff;
-	}
-</style>
+//全局页面背景色
+page {
+	background-color: #e2e2e2;
+	font-family: '宋体';
+	padding: 10px;
+}
+//底部安全距离
+.bottom-safety {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+}
+/**uniapp中uni.showModal H5中被挡住的解决方案*/
+uni-modal {
+	z-index: 19999 !important;
+}
+/**去掉官方button边框线*/
+button::after {
+	border: none;
+}
+/**挂载iconfont字体图标*/
+@font-face {
+	font-family: 'iconfont';
+	src: url('https://at.alicdn.com/t/c/font_3725442_m340vapx8g.ttf?t=1690817905330') format('truetype');
+	/* src: url('~@/static/font/iconfont.ttf') format('truetype'); */
+}
+.icon {
+	font-family: iconfont;
+}
+</style>

+ 533 - 0
common/style.scss

@@ -0,0 +1,533 @@
+/**end**/
+.omit {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+.ellip {
+	-webkit-line-clamp: 2;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+.m15 {
+	margin-top: 15px !important;
+}
+.clear {
+	clear: both;
+}
+.flex {
+	display: flex;
+	text-align: center;
+	.f {
+		flex: 1;
+		overflow: hidden;
+	}
+}
+.btn {
+	color: white;
+	background-color: $main-color;
+	border-radius: 30px;
+	font-size: 15px;
+	text-align: center;
+	padding: 5px 5px;
+}
+.form_group {
+	padding: 9px 10px 9px 10px;
+	overflow: hidden;
+	background-color: white;
+	position: relative;
+	&.form_group:last-child {
+		border-bottom: 0px;
+	}
+	.lable {
+		font-size: 17px;
+		text-align: left;
+		color: #545555;
+		position: relative;
+		font-weight: bold;
+	}
+	.re {
+		&::before {
+			content: '*';
+			width: 0px;
+			height: 0px;
+			color: red;
+			position: absolute;
+			top: -7px;
+			left: -8px;
+			font-weight: bold;
+		}
+	}
+	.avatar {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		width: 55px;
+		height: 55px;
+		border-radius: 50%;
+	}
+	picker {
+		position: relative;
+		.more {
+			position: absolute;
+			right: 7px;
+			top: 13px;
+			font-weight: normal;
+			color: $font-c;
+		}
+	}
+	.uni-file-picker {
+		margin-top: 12px;
+	}
+	.up {
+		color: $font-c;
+		font-size: 15px;
+		padding: 5px;
+		.icon {
+			padding-right: 5px;
+		}
+	}
+	.fjsc {
+		margin-top: 3px;
+		color: $font-c;
+		font-size: 13px;
+	}
+	.uni-data-tree {
+		margin-top: 12px;
+		.placeholder {
+			font-size: 15px;
+		}
+	}
+	input {
+		font-size: 15px;
+		border-radius: 5px;
+		padding: 10px;
+		margin-top: 12px;
+		border: 1px solid #d0d0d0;
+		color: $font-c;
+	}
+	.ops {
+		position: absolute;
+		right: 23px;
+		top: 53px;
+		font-size: 15px;
+		color: $main-color;
+		z-index: 11;
+	}
+	textarea {
+		font-size: 15px;
+		border-radius: 5px;
+		padding: 10px;
+		margin-top: 12px;
+		height: 90px;
+		width: 93%;
+		border: 1px solid #d0d0d0;
+		color: $font-c;
+	}
+}
+/**标签**/
+.tabs {
+	background-color: white;
+	padding: 5px;
+	.label {
+		display: none;
+	}
+	.search {
+		display: none;
+	}
+}
+/**PC端产品列表**/
+.goods {
+	.list {
+		margin-top: 10px;
+		padding-left: 10px;
+		.fimg {
+			width: 100%;
+		}
+		.item {
+			float: left;
+			width: 50%;
+			overflow: hidden;
+			text-align: center;
+			position: relative;
+			.out {
+				padding: 0px 12px 10px 0px;
+				.inside {
+					background-color: white;
+					padding: 0px 0px 3px 0px;
+					border-radius: 5px;
+					overflow: hidden;
+					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+					position: relative;
+					.img {
+						width: 100%;
+						height: 164px;
+						background-color: #e0e0e0;
+					}
+					.title {
+						font-size: 14px;
+						font-weight: 400;
+						color: #333;
+						padding: 8px 10px 0px 10px;
+						text-align: left;
+					}
+					.time {
+						padding: 8px 10px 10px 10px;
+						float: left;
+						color: #919191;
+						font-size: 13px;
+					}
+					.price {
+						padding: 8px 10px 10px 10px;
+						float: left;
+						color: $main-color;
+						font-size: 14px;
+					}
+					.kc {
+						padding: 8px 10px 10px 10px;
+						float: right;
+						color: #919191;
+						font-size: 13px;
+					}
+				}
+			}
+		}
+	}
+	.detail {
+		background-color: white;
+		.content {
+			padding-bottom: 30px;
+			.right {
+				text-align: left;
+				padding: 15px 15px 0px 15px;
+				.title {
+					font-size: 18px;
+					line-height: 1.6;
+				}
+				.price {
+					font-size: 20px;
+					font-weight: bold;
+					color: $main-color;
+					margin-top: 10px;
+					.m {
+						float: right;
+						font-size: 15px;
+						font-weight: normal;
+						color: #545555;
+						padding-top: 5px;
+						padding-left: 5px;
+					}
+				}
+			}
+		}
+	}
+}
+/*行业新闻*/
+.news {
+	.list {
+		margin-top: 10px;
+		.item {
+			background-color: white;
+			border-bottom: 1px solid #f0f2f7;
+			padding: 10px;
+			&:last-child {
+				border: 0px;
+			}
+			.img {
+				float: left;
+				width: 100px;
+				height: 70px;
+				border-radius: 5px;
+				background-color: #e0e0e0;
+			}
+			.con {
+				float: left;
+				width: 63%;
+				color: #888;
+				height: 71px;
+				font-size: 13px;
+				line-height: 1.6;
+				padding-left: 10px;
+				position: relative;
+				.title {
+					font-size: 14px;
+					color: #121212;
+					line-height: 1.6;
+				}
+				.desc {
+					display: none;
+				}
+				.date {
+					margin-top: 5px;
+					font-size: 13px;
+					bottom: 0px;
+					position: absolute;
+				}
+			}
+			.look {
+				display: none;
+				float: right;
+				border-radius: 3px;
+				padding: 10px 30px;
+			}
+		}
+	}
+	.detail {
+		background-color: white;
+		padding: 0px 20px 20px 20px;
+		.content {
+			padding-top: 20px;
+			.title {
+				font-size: 18px;
+			}
+			.desc {
+				padding-top: 15px;
+				font-size: 13px;
+				color: #7c8388;
+				text {
+					padding-right: 25px;
+				}
+			}
+		}
+	}
+}
+/*****设置**********/
+.cmd {
+	margin-top: 10px;
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+	border-radius: 5px;
+	overflow: hidden;
+	.s_item {
+		padding: 10px;
+		background-color: white;
+		color: $font-c;
+		overflow: hidden;
+		border-bottom: 1px solid #f0f2f7;
+		.le {
+			float: left;
+			font-size: 17px;
+			.jf {
+				padding-left: 10px;
+				color: $main-color;
+			}
+			.qd {
+				font-size: 13px;
+				margin-top: 5px;
+				color: #989898;
+			}
+		}
+		.ri {
+			float: right;
+			padding: 5px 25px;
+			border-radius: 30px;
+		}
+		.ic {
+			display: block;
+			float: left;
+			width: 27px;
+			height: 27px;
+			font-size: 25px;
+			background-color: red;
+			text-align: center;
+			padding: 7px;
+			border-radius: 50%;
+			margin-right: 13px;
+			line-height: 29px;
+		}
+		.title {
+			color: #545555;
+			padding-top: 11px;
+			float: left;
+		}
+		.arrow {
+			font-size: 20px;
+			float: right;
+			color: #9a9a9a;
+			margin-top: 10px;
+		}
+	}
+}
+.mfooter {
+	position: fixed;
+	width: 100%;
+	bottom: 0px;
+	background-color: white;
+	text-align: center;
+	padding: 13px 0px 13px 0px;
+	.btn {
+		width: 70%;
+		border-radius: 30px;
+		.icon {
+			padding-right: 3px;
+		}
+		text {
+			color: white !important;
+		}
+	}
+}
+.ifnull {
+	color: red;
+	font-weight: bold;
+}
+.ppopup {
+	padding: 15px;
+	.sh {
+		font-size: 14px;
+		color: $font-c;
+		padding-top: 7px;
+	}
+	.form_group {
+		padding: 12px 10px 8px 10px;
+	}
+	.btn {
+		width: 70%;
+		border-radius: 30px;
+		margin-top: 20px;
+	}
+}
+._success {
+	background-color: #f0f9eb !important;
+	color: #67c23a !important;
+}
+._info {
+	background-color: #f4f4f5 !important;
+	color: #909399 !important;
+}
+._error {
+	background-color: #fef0f0 !important;
+	color: #f56c6c !important;
+}
+.message {
+	padding: 15px;
+	border-radius: 5px;
+	font-size: 14px;
+	background-color: white;
+	color: $font-c;
+	margin-bottom: 10px;
+	.icon {
+		padding-right: 3px;
+		font-size: 16px;
+	}
+}
+.bitem {
+	background-color: white;
+	padding: 5px 11px 11px 11px;
+	border-radius: 5px;
+	margin-bottom: 13px;
+	font-size: 14px;
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+	overflow: hidden;
+	.top {
+		padding: 5px 5px 10px 5px;
+		color: #545555;
+		.bt {
+			float: left;
+			width: 77%;
+			overflow: hidden;
+		}
+		.state {
+			float: right;
+		}
+	}
+	.op {
+		float: right;
+		margin-top: -30px;
+		margin-right: -8px;
+		font-size: 20px;
+		color: $font-c;
+	}
+	.content {
+		background-color: #f2f2f2;
+		padding: 10px;
+		border-radius: 4px;
+		margin-bottom: 10px;
+		color: #686868;
+		.pic {
+			float: left;
+			border-radius: 3px;
+			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+		}
+		.con {
+			float: left;
+			margin-left: 10px;
+			width: 63%;
+			position: relative;
+			height: 100px;
+			.title {
+				margin-bottom: 5px;
+			}
+			.desc {
+				position: absolute;
+				bottom: 0px;
+			}
+		}
+	}
+	.tuihuo {
+		background-color: #fde2e2;
+		padding: 10px;
+		border-radius: 4px;
+		margin-bottom: 10px;
+		font-size: 14px;
+		color: #f56c6c;
+	}
+	.bot {
+		font-size: 14px;
+		.jsb {
+			color: $main-color;
+			float: left;
+			.icon {
+				padding-right: 3px;
+			}
+		}
+		.date {
+			float: right;
+			color: #686868;
+			font-size: 13px;
+		}
+	}
+}
+.topright {
+	position: absolute;
+	width: 107px;
+	height: 24px;
+	right: -21px;
+	top: 26px;
+	line-height: 23px;
+	text-align: center;
+	-webkit-transform: rotate(34deg);
+	background-color: #ff5722;
+	top: 9px;
+	color: white;
+	font-size: 12px;
+}
+.pitem {
+	padding: 15px 0px 15px 0px;
+	border-bottom: 1px solid #f0f2f7;
+	color: $font-c;
+	.tit {
+		float: left;
+	}
+	.icon {
+		float: right;
+		font-size: 23px;
+		padding-left: 13px;
+	}
+}
+.vlabel {
+	position: relative;
+	color: $font-c;
+	margin-bottom: 10px;
+	.tag {
+		position: absolute;
+		width: 5px;
+		height: 15px;
+		background-color: $main-color;
+		border-radius: 5px;
+		top: 3px;
+	}
+	.title {
+		margin-left: 10px;
+	}
+}

+ 47 - 62
pages.json

@@ -23,7 +23,7 @@
 				"enablePullDownRefresh": false
 			}
 
-		},{
+		}, {
 			"path": "pages/login/userAgreement",
 			"style": {
 				"navigationBarTitleText": "",
@@ -33,13 +33,7 @@
 		}, {
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "首页",
-				"app-plus": {
-					"titleNView": {
-						"backgroundColor": "#ff4200",
-						"titleColor": "#fff"
-					}
-				}
+				"navigationBarTitleText": "首页"
 			}
 
 		},
@@ -80,79 +74,70 @@
 				}
 			}
 
+		}, {
+			"path": "pages/enterprise/enterprise",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/oneMarket/oneMarket",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/goodsDetails/goodsDetails",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/twoMarket/twoMarket",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
 		}
-	    ,{
-            "path" : "pages/enterprise/enterprise",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/oneMarket/oneMarket",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/goodsDetails/goodsDetails",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-        ,{
-            "path" : "pages/twoMarket/twoMarket",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
-	"globalStyle": {
-		"navigationBarTextStyle": "white",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#fff",
-		"backgroundColor": "#F8F8F8"
-	},
+	],
 	"tabBar": {
 		"color": "#7A7E83",
-		"selectedColor": "#3cc51f",
+		"selectedColor": "#4581fb",
 		"borderStyle": "black",
-		"backgroundColor": "#ffffff",
+		"backgroundColor": "#F8F8F8",
 		"list": [{
 				"pagePath": "pages/index/index",
-				"iconPath": "static/icon/home-icon.png",
-				"selectedIconPath": "static/icon/home-icon-select.png",
+				"iconPath": "static/tab/sy.png",
+				"selectedIconPath": "static/tab/sy_s.png",
 				"text": "首页"
 			},
 			{
 				"pagePath": "pages/order/OrderIndex",
-				"iconPath": "static/icon/order-icon.png",
-				"selectedIconPath": "static/icon/order-icon-select.png",
+				"iconPath": "static/tab/dd.png",
+				"selectedIconPath": "static/tab/dd_s.png",
 				"text": "订单"
 			},
 			{
 				"pagePath": "pages/message/MessageIndex",
-				"iconPath": "static/icon/message-icon.png",
-				"selectedIconPath": "static/icon/message-icon-select.png",
+				"iconPath": "static/tab/xx.png",
+				"selectedIconPath": "static/tab/xxs.png",
 				"text": "消息"
 			},
 			{
 				"pagePath": "pages/personal/personal",
-				"iconPath": "static/icon/person-icon.png",
-				"selectedIconPath": "static/icon/person-icon-select.png",
-				"text": "个人中心"
+				"iconPath": "static/tab/wd.png",
+				"selectedIconPath": "static/tab/wds.png",
+				"text": "我的"
 			}
 		]
+	},
+	"globalStyle": {
+		"navigationBarTextStyle": "white",
+		"navigationBarTitleText": "边民互市贸易",
+		"navigationBarBackgroundColor": "#4581fb"
 	}
 }

BIN
static/tab/dd.png


BIN
static/tab/dd_s.png


BIN
static/tab/sy.png


BIN
static/tab/sy_s.png


BIN
static/tab/wd.png


BIN
static/tab/wds.png


BIN
static/tab/xx.png


BIN
static/tab/xxs.png


+ 6 - 74
uni.scss

@@ -1,79 +1,11 @@
 /**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
- *
+ * 常用样式变量
  */
-
-/**
- * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
- */
-
-/* 颜色变量 */
-
-/* 行为相关颜色 */
-$uni-color-primary: #007aff;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
-
-/* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
-$uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
-
-/* 背景颜色 */
-$uni-bg-color:#ffffff;
-$uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
-
-/* 边框颜色 */
-$uni-border-color:#c8c7cc;
-
-/* 尺寸变量 */
-
-/* 文字尺寸 */
-$uni-font-size-sm:12px;
-$uni-font-size-base:14px;
-$uni-font-size-lg:16;
-
-/* 图片尺寸 */
-$uni-img-size-sm:20px;
-$uni-img-size-base:26px;
-$uni-img-size-lg:40px;
-
-/* Border Radius */
-$uni-border-radius-sm: 2px;
-$uni-border-radius-base: 3px;
-$uni-border-radius-lg: 6px;
-$uni-border-radius-circle: 50%;
-
-/* 水平间距 */
-$uni-spacing-row-sm: 5px;
-$uni-spacing-row-base: 10px;
-$uni-spacing-row-lg: 15px;
-
-/* 垂直间距 */
-$uni-spacing-col-sm: 4px;
-$uni-spacing-col-base: 8px;
-$uni-spacing-col-lg: 12px;
-
-/* 透明度 */
-$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
-
-/* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:20px;
-$uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:26px;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$line: #eeeeee;
+$main-color: #4581fb;
+$font-c: #545555;
+$font-c1: #333;
+$border-radius: 5px;
 
 // uView的全局SCSS主题文件
 @import 'uview-ui/theme.scss';