fix:登录页面返回按钮样式更改

pages/login/login.vue

@@ -4,13 +4,21 @@
 		<!-- <view class="btn">
       <u-button v-if="isLogoutShow" @click="login" color="transparent">点击登录</u-button>
     </view>-->
-		<view class="back-wrapper">
+		<u-navbar
+			title=" "
+			bgColor="transparent"
+			:leftIconSize="isShowCaptcha ? 20 : 0"
+			@leftClick="back"
+		>
+		</u-navbar>
+
+		<!-- <view class="back-wrapper">
 			<view class="back-inner">
 				<view class="back" v-if="isShowCaptcha" @tap="back">
 					<u-icon name="arrow-left" color="white" size="16"></u-icon>
 				</view>
 			</view>
-		</view>
+		</view> -->
 
 		<view class="main-wrapper">
 			<view class="main">
@@ -219,7 +227,7 @@ export default {
 				})
 				if (res.status === 0) {
 					this.$common.msgToast('验证码已发送')
-			this.isShowCaptcha = true
+					this.isShowCaptcha = true
 					this.timer = setInterval(() => {
 						if (this.time > 0) this.time--
 						else {
@@ -331,12 +339,18 @@ export default {
 	// 	height: 744rpx;
 	// }
 
+	/deep/ .u-navbar {
+	}
+
 	.back-wrapper {
 		width: 100%;
 		height: 200rpx;
+		box-sizing: border-box;
+		padding-top: 40rpx;
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		// background-color: red;
 
 		.back-inner {
 			width: 80vw;
@@ -354,18 +368,19 @@ export default {
 	}
 
 	.main-wrapper {
+		// background-color: blue;
 		width: 100%;
-		height: calc(100vh - 200rpx);
+		height: calc(100vh - 300rpx);
 		display: flex;
 		justify-content: center;
-		align-items: center;
+		// align-items: center;
 
 		.main {
 			width: 80vw;
 			height: 670rpx;
 
 			.title-wrapper {
-				margin-top: 40rpx;
+				margin-top: 400rpx;
 
 				.title {
 					font-size: 20px;

unpackage/dist/dev/mp-weixin/pages/login/login.json

@@ -3,7 +3,7 @@
   "navigationBarTitleText": "",
   "enablePullDownRefresh": false,
   "usingComponents": {
-    "u-icon": "/uview-ui/components/u-icon/u-icon",
+    "u-navbar": "/uview-ui/components/u-navbar/u-navbar",
     "u--input": "/uview-ui/components/u--input/u--input",
     "u-checkbox-group": "/uview-ui/components/u-checkbox-group/u-checkbox-group",
     "u-checkbox": "/uview-ui/components/u-checkbox/u-checkbox",

unpackage/dist/dev/mp-weixin/pages/login/login.wxml

@@ -1 +1 @@
-<view class="bg data-v-b237504c"><view class="back-wrapper data-v-b237504c"><view class="back-inner data-v-b237504c"><block wx:if="{{isShowCaptcha}}"><view data-event-opts="{{[['tap',[['back',['$event']]]]]}}" class="back data-v-b237504c" bindtap="__e"><u-icon vue-id="35a7246c-1" name="arrow-left" color="white" size="16" class="data-v-b237504c" bind:__l="__l"></u-icon></view></block></view></view><view class="main-wrapper data-v-b237504c"><view class="main data-v-b237504c"><view class="title-wrapper data-v-b237504c"><view class="title data-v-b237504c"><view class="title-01 data-v-b237504c">登录</view><view class="title-02 data-v-b237504c">品之鉴</view></view><view class="title-wrapper__desc data-v-b237504c">若为未注册账号则将自动转入品之鉴注册页</view></view><transition-group vue-id="35a7246c-2" name="fade" class="data-v-b237504c" bind:__l="__l" vue-slots="{{['default']}}"><view hidden="{{!(!isShowCaptcha)}}" class="phone-login-wrapper data-v-b237504c"><view class="phone-wrapper data-v-b237504c"><view class="name data-v-b237504c">手机号</view><u--input vue-id="{{('35a7246c-3')+','+('35a7246c-2')}}" placeholder="请输入手机号" border="none" focus="{{true}}" value="{{phone}}" data-event-opts="{{[['^change',[['handleChange']]],['^input',[['__set_model',['','phone','$event',[]]]]]]}}" bind:change="__e" bind:input="__e" class="data-v-b237504c" bind:__l="__l"></u--input></view><view class="agreement-wrapper data-v-b237504c"><u-checkbox-group vue-id="{{('35a7246c-4')+','+('35a7246c-2')}}" iconPlacement="left" placement="row" inactiveColor="#76C458" value="{{checked}}" data-event-opts="{{[['^change',[['handleChange']]],['^input',[['__set_model',['','checked','$event',[]]]]]]}}" bind:change="__e" bind:input="__e" class="data-v-b237504c" bind:__l="__l" vue-slots="{{['default']}}"><u-checkbox vue-id="{{('35a7246c-5')+','+('35a7246c-4')}}" name="yes" shape="circle" activeColor="#76C458" class="data-v-b237504c" bind:__l="__l"></u-checkbox><view class="know data-v-b237504c">已阅读并同意<text data-event-opts="{{[['tap',[['agreementHandle',['service']]]]]}}" bindtap="__e" class="data-v-b237504c">《软件许可及服务协议》</text><text data-event-opts="{{[['tap',[['agreementHandle',['privacy']]]]]}}" bindtap="__e" class="data-v-b237504c">&《隐私保护政策》</text></view></u-checkbox-group></view><view data-event-opts="{{[['tap',[['getCaptcha',['$event']]]]]}}" class="captcha-btn data-v-b237504c" style="{{'background:'+(disabled?'#dadadc':'#76c558')+';'}}" bindtap="__e">获取验证码</view><view class="btns-wrapper data-v-b237504c"><view class="btns-wrapper__weixin data-v-b237504c"><block wx:if="{{isShow}}"><u-button vue-id="{{('35a7246c-6')+','+('35a7246c-2')}}" open-type="getPhoneNumber" color="transparent" text="微信登录" data-event-opts="{{[['^getphonenumber',[['getPhoneNumber']]]]}}" bind:getphonenumber="__e" class="data-v-b237504c" bind:__l="__l"></u-button></block></view><view data-event-opts="{{[['tap',[['goRouter',['$event']]]]]}}" class="btns-wrapper__youke data-v-b237504c" bindtap="__e">游客访问</view></view></view><view hidden="{{!(isShowCaptcha)}}" class="fill-captcha-wrapper data-v-b237504c"><view class="fill-captcha-wrapper__tip data-v-b237504c"><view class="tip-01 data-v-b237504c">已发送验证码至</view><view class="tip-02 data-v-b237504c">{{phone}}</view></view><view class="{{['form-view-class','data-v-b237504c',captcha?'code_login_ipt':'']}}"><u-code-input vue-id="{{('35a7246c-7')+','+('35a7246c-2')}}" maxlength="{{6}}" space="{{5}}" focus="{{true}}" value="{{captcha}}" data-event-opts="{{[['^finish',[['handleFinish']]],['^input',[['__set_model',['','captcha','$event',[]]]]]]}}" bind:finish="__e" bind:input="__e" class="data-v-b237504c" bind:__l="__l"></u-code-input></view><view class="resend-wrapper data-v-b237504c" style="{{'color:'+(timer===null?'#76c558':'#8d8d8d')+';'}}"><view data-event-opts="{{[['tap',[['resendCaptcha',['$event']]]]]}}" bindtap="__e" class="data-v-b237504c">重新发送</view><block wx:if="{{timer!==null}}"><view class="data-v-b237504c">{{"("+time+"s)"}}</view></block></view></view></transition-group></view></view></view>
+<view class="bg data-v-b237504c"><u-navbar vue-id="35a7246c-1" title=" " bgColor="transparent" leftIconSize="{{isShowCaptcha?20:0}}" data-event-opts="{{[['^leftClick',[['back']]]]}}" bind:leftClick="__e" class="data-v-b237504c" bind:__l="__l"></u-navbar><view class="main-wrapper data-v-b237504c"><view class="main data-v-b237504c"><view class="title-wrapper data-v-b237504c"><view class="title data-v-b237504c"><view class="title-01 data-v-b237504c">登录</view><view class="title-02 data-v-b237504c">品之鉴</view></view><view class="title-wrapper__desc data-v-b237504c">若为未注册账号则将自动转入品之鉴注册页</view></view><transition-group vue-id="35a7246c-2" name="fade" class="data-v-b237504c" bind:__l="__l" vue-slots="{{['default']}}"><view hidden="{{!(!isShowCaptcha)}}" class="phone-login-wrapper data-v-b237504c"><view class="phone-wrapper data-v-b237504c"><view class="name data-v-b237504c">手机号</view><u--input vue-id="{{('35a7246c-3')+','+('35a7246c-2')}}" placeholder="请输入手机号" border="none" focus="{{true}}" value="{{phone}}" data-event-opts="{{[['^change',[['handleChange']]],['^input',[['__set_model',['','phone','$event',[]]]]]]}}" bind:change="__e" bind:input="__e" class="data-v-b237504c" bind:__l="__l"></u--input></view><view class="agreement-wrapper data-v-b237504c"><u-checkbox-group vue-id="{{('35a7246c-4')+','+('35a7246c-2')}}" iconPlacement="left" placement="row" inactiveColor="#76C458" value="{{checked}}" data-event-opts="{{[['^change',[['handleChange']]],['^input',[['__set_model',['','checked','$event',[]]]]]]}}" bind:change="__e" bind:input="__e" class="data-v-b237504c" bind:__l="__l" vue-slots="{{['default']}}"><u-checkbox vue-id="{{('35a7246c-5')+','+('35a7246c-4')}}" name="yes" shape="circle" activeColor="#76C458" class="data-v-b237504c" bind:__l="__l"></u-checkbox><view class="know data-v-b237504c">已阅读并同意<text data-event-opts="{{[['tap',[['agreementHandle',['service']]]]]}}" bindtap="__e" class="data-v-b237504c">《软件许可及服务协议》</text><text data-event-opts="{{[['tap',[['agreementHandle',['privacy']]]]]}}" bindtap="__e" class="data-v-b237504c">&《隐私保护政策》</text></view></u-checkbox-group></view><view data-event-opts="{{[['tap',[['getCaptcha',['$event']]]]]}}" class="captcha-btn data-v-b237504c" style="{{'background:'+(disabled?'#dadadc':'#76c558')+';'}}" bindtap="__e">获取验证码</view><view class="btns-wrapper data-v-b237504c"><view class="btns-wrapper__weixin data-v-b237504c"><block wx:if="{{isShow}}"><u-button vue-id="{{('35a7246c-6')+','+('35a7246c-2')}}" open-type="getPhoneNumber" color="transparent" text="微信登录" data-event-opts="{{[['^getphonenumber',[['getPhoneNumber']]]]}}" bind:getphonenumber="__e" class="data-v-b237504c" bind:__l="__l"></u-button></block></view><view data-event-opts="{{[['tap',[['goRouter',['$event']]]]]}}" class="btns-wrapper__youke data-v-b237504c" bindtap="__e">游客访问</view></view></view><view hidden="{{!(isShowCaptcha)}}" class="fill-captcha-wrapper data-v-b237504c"><view class="fill-captcha-wrapper__tip data-v-b237504c"><view class="tip-01 data-v-b237504c">已发送验证码至</view><view class="tip-02 data-v-b237504c">{{phone}}</view></view><view class="{{['form-view-class','data-v-b237504c',captcha?'code_login_ipt':'']}}"><u-code-input vue-id="{{('35a7246c-7')+','+('35a7246c-2')}}" maxlength="{{6}}" space="{{5}}" focus="{{true}}" value="{{captcha}}" data-event-opts="{{[['^finish',[['handleFinish']]],['^input',[['__set_model',['','captcha','$event',[]]]]]]}}" bind:finish="__e" bind:input="__e" class="data-v-b237504c" bind:__l="__l"></u-code-input></view><view class="resend-wrapper data-v-b237504c" style="{{'color:'+(timer===null?'#76c558':'#8d8d8d')+';'}}"><view data-event-opts="{{[['tap',[['resendCaptcha',['$event']]]]]}}" bindtap="__e" class="data-v-b237504c">重新发送</view><block wx:if="{{timer!==null}}"><view class="data-v-b237504c">{{"("+time+"s)"}}</view></block></view></view></transition-group></view></view></view>

unpackage/dist/dev/mp-weixin/pages/login/login.wxss

@@ -43,6 +43,8 @@
 .bg .back-wrapper.data-v-b237504c {
   width: 100%;
   height: 200rpx;
+  box-sizing: border-box;
+  padding-top: 40rpx;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -61,17 +63,16 @@
 }
 .bg .main-wrapper.data-v-b237504c {
   width: 100%;
-  height: calc(100vh - 200rpx);
+  height: calc(100vh - 300rpx);
   display: flex;
   justify-content: center;
-  align-items: center;
 }
 .bg .main-wrapper .main.data-v-b237504c {
   width: 80vw;
   height: 670rpx;
 }
 .bg .main-wrapper .main .title-wrapper.data-v-b237504c {
-  margin-top: 40rpx;
+  margin-top: 400rpx;
 }
 .bg .main-wrapper .main .title-wrapper .title.data-v-b237504c {
   font-size: 20px;

unpackage/dist/dev/mp-weixin/uview-ui/components/u-navbar/u-navbar.js

@@ -0,0 +1,11 @@
+(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["uview-ui/components/u-navbar/u-navbar"],{705:function(n,e,t){"use strict";t.r(e);var r=t(706),u=t(708);for(var i in u)["default"].indexOf(i)<0&&function(n){t.d(e,n,(function(){return u[n]}))}(i);t(711);var o,a=t(33),c=Object(a["default"])(u["default"],r["render"],r["staticRenderFns"],!1,null,"1194bf80",null,!1,r["components"],o);c.options.__file="uview-ui/components/u-navbar/u-navbar.vue",e["default"]=c.exports},706:function(n,e,t){"use strict";t.r(e);var r=t(707);t.d(e,"render",(function(){return r["render"]})),t.d(e,"staticRenderFns",(function(){return r["staticRenderFns"]})),t.d(e,"recyclableRender",(function(){return r["recyclableRender"]})),t.d(e,"components",(function(){return r["components"]}))},707:function(n,e,t){"use strict";var r;t.r(e),t.d(e,"render",(function(){return u})),t.d(e,"staticRenderFns",(function(){return o})),t.d(e,"recyclableRender",(function(){return i})),t.d(e,"components",(function(){return r}));try{r={uStatusBar:function(){return Promise.all([t.e("common/vendor"),t.e("uview-ui/components/u-status-bar/u-status-bar")]).then(t.bind(null,621))},uIcon:function(){return Promise.all([t.e("common/vendor"),t.e("uview-ui/components/u-icon/u-icon")]).then(t.bind(null,347))}}}catch(a){if(-1===a.message.indexOf("Cannot find module")||-1===a.message.indexOf(".vue"))throw a;console.error(a.message),console.error("1. 排查组件名称拼写是否正确"),console.error("2. 排查组件是否符合 easycom 规范，文档：https://uniapp.dcloud.net.cn/collocation/pages?id=easycom"),console.error("3. 若组件不符合 easycom 规范，需手动引入，并在 components 中注册该组件")}var u=function(){var n=this,e=n.$createElement,t=(n._self._c,n.fixed&&n.placeholder?n.$u.addUnit(n.$u.getPx(n.height)+n.$u.sys().statusBarHeight,"px"):null),r=n.$u.addUnit(n.height),u=n.__get_style([{width:n.$u.addUnit(n.titleWidth)},n.$u.addStyle(n.titleStyle)]);n.$mp.data=Object.assign({},{$root:{g0:t,g1:r,s0:u}})},i=!1,o=[];u._withStripped=!0},708:function(n,e,t){"use strict";t.r(e);var r=t(709),u=t.n(r);for(var i in r)["default"].indexOf(i)<0&&function(n){t.d(e,n,(function(){return r[n]}))}(i);e["default"]=u.a},709:function(n,e,t){"use strict";(function(n){var r=t(4);Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var u=r(t(710)),i={name:"u-navbar",mixins:[n.$u.mpMixin,n.$u.mixin,u.default],data:function(){return{}},methods:{leftClick:function(){this.$emit("leftClick"),this.autoBack&&n.navigateBack()},rightClick:function(){this.$emit("rightClick")}}};e.default=i}).call(this,t(2)["default"])},711:function(n,e,t){"use strict";t.r(e);var r=t(712),u=t.n(r);for(var i in r)["default"].indexOf(i)<0&&function(n){t.d(e,n,(function(){return r[n]}))}(i);e["default"]=u.a},712:function(n,e,t){}}]);
+//# sourceMappingURL=../../../../.sourcemap/mp-weixin/uview-ui/components/u-navbar/u-navbar.js.map
+;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
+    'uview-ui/components/u-navbar/u-navbar-create-component',
+    {
+        'uview-ui/components/u-navbar/u-navbar-create-component':(function(module, exports, __webpack_require__){
+            __webpack_require__('2')['createComponent'](__webpack_require__(705))
+        })
+    },
+    [['uview-ui/components/u-navbar/u-navbar-create-component']]
+]);

unpackage/dist/dev/mp-weixin/uview-ui/components/u-navbar/u-navbar.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "u-status-bar": "/uview-ui/components/u-status-bar/u-status-bar",
+    "u-icon": "/uview-ui/components/u-icon/u-icon"
+  },
+  "component": true
+}

unpackage/dist/dev/mp-weixin/uview-ui/components/u-navbar/u-navbar.wxml

@@ -0,0 +1 @@
+<view class="u-navbar data-v-1194bf80"><block wx:if="{{fixed&&placeholder}}"><view class="u-navbar__placeholder data-v-1194bf80" style="{{'height:'+($root.g0)+';'}}"></view></block><view class="{{['data-v-1194bf80',fixed&&'u-navbar--fixed']}}"><block wx:if="{{safeAreaInsetTop}}"><u-status-bar vue-id="21022e74-1" bgColor="{{bgColor}}" class="data-v-1194bf80" bind:__l="__l"></u-status-bar></block><view class="{{['u-navbar__content','data-v-1194bf80',border&&'u-border-bottom']}}" style="{{'height:'+($root.g1)+';'+('background-color:'+(bgColor)+';')}}"><view class="u-navbar__content__left data-v-1194bf80" hover-class="u-navbar__content__left--hover" hover-start-time="150" data-event-opts="{{[['tap',[['leftClick',['$event']]]]]}}" bindtap="__e"><block wx:if="{{$slots.left}}"><slot name="left"></slot></block><block wx:else><block wx:if="{{leftIcon}}"><u-icon vue-id="21022e74-2" name="{{leftIcon}}" size="{{leftIconSize}}" color="{{leftIconColor}}" class="data-v-1194bf80" bind:__l="__l"></u-icon></block><block wx:if="{{leftText}}"><text class="u-navbar__content__left__text data-v-1194bf80" style="{{'color:'+(leftIconColor)+';'}}">{{leftText}}</text></block></block></view><block wx:if="{{$slots.center}}"><slot name="center"></slot></block><block wx:else><text class="u-line-1 u-navbar__content__title data-v-1194bf80" style="{{$root.s0}}">{{title}}</text></block><block wx:if="{{$slots.right||rightIcon||rightText}}"><view data-event-opts="{{[['tap',[['rightClick',['$event']]]]]}}" class="u-navbar__content__right data-v-1194bf80" bindtap="__e"><block wx:if="{{$slots.right}}"><slot name="right"></slot></block><block wx:else><block wx:if="{{rightIcon}}"><u-icon vue-id="21022e74-3" name="{{rightIcon}}" size="20" class="data-v-1194bf80" bind:__l="__l"></u-icon></block><block wx:if="{{rightText}}"><text class="u-navbar__content__right__text data-v-1194bf80">{{rightText}}</text></block></block></view></block></view></view></view>

unpackage/dist/dev/mp-weixin/uview-ui/components/u-navbar/u-navbar.wxss

@@ -0,0 +1,83 @@
+@charset "UTF-8";
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+view.data-v-1194bf80, scroll-view.data-v-1194bf80, swiper-item.data-v-1194bf80 {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+.u-navbar--fixed.data-v-1194bf80 {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 11;
+}
+.u-navbar__content.data-v-1194bf80 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 44px;
+  background-color: #9acafc;
+  position: relative;
+  justify-content: center;
+}
+.u-navbar__content__left.data-v-1194bf80, .u-navbar__content__right.data-v-1194bf80 {
+  padding: 0 13px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.u-navbar__content__left.data-v-1194bf80 {
+  left: 0;
+}
+.u-navbar__content__left--hover.data-v-1194bf80 {
+  opacity: 0.7;
+}
+.u-navbar__content__left__text.data-v-1194bf80 {
+  font-size: 15px;
+  margin-left: 3px;
+}
+.u-navbar__content__title.data-v-1194bf80 {
+  text-align: center;
+  font-size: 16px;
+  color: #303133;
+}
+.u-navbar__content__right.data-v-1194bf80 {
+  right: 0;
+}
+.u-navbar__content__right__text.data-v-1194bf80 {
+  font-size: 15px;
+  margin-left: 3px;
+}
+