Commit 671e245aa36bd8a0f948f5ff409a24d81165f25b

Authored by fengtao
1 parent e028ecf8

pref:优化之前app点击登录不起

... ... @@ -39,7 +39,8 @@
39 39 <text class="item-text home-text-muted">告警统计</text>
40 40 </view>
41 41 <view class="item-child-bottom u-flex">
42   - <view @click="navigatorAlarmStatus(['ACTIVE_UNACK', 'ACTIVE_ACK'])" class="u-flex sigle-child">
  42 + <view @click="navigatorAlarmStatus(['ACTIVE_UNACK', 'ACTIVE_ACK'])"
  43 + class="u-flex sigle-child">
43 44 <view class="sigle-text">
44 45 <text class="home-text-total">{{ alertData.noHandle }}</text>
45 46 </view>
... ... @@ -72,7 +73,9 @@
72 73 </view> -->
73 74 <view @click="openCamera" class="grid-item">
74 75 <view class="item-center">
75   - <view class="center"><image class="image" src="../../static/camer.png"></image></view>
  76 + <view class="center">
  77 + <image class="image" src="../../static/camer.png"></image>
  78 + </view>
76 79 <view class="center-text"><text class="text text-muted" style="">摄像头管理</text></view>
77 80 </view>
78 81 </view>
... ... @@ -84,7 +87,9 @@
84 87 </view> -->
85 88 <view @click="openOrgStatus" class="grid-item">
86 89 <view class="item-center">
87   - <view class="center"><image class="image" src="../../static/status.png"></image></view>
  90 + <view class="center">
  91 + <image class="image" src="../../static/status.png"></image>
  92 + </view>
88 93 <view class="center-text"><text class="text text-muted">组态</text></view>
89 94 </view>
90 95 </view>
... ... @@ -96,81 +101,83 @@
96 101 </template>
97 102
98 103 <script>
99   -import fTabbar from '@/components/module/f-tabbar/f-tabbar';
100   -import { mapActions } from 'vuex';
  104 + import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  105 + import {
  106 + mapActions
  107 + } from 'vuex';
101 108
102   -export default {
103   - components: {
104   - fTabbar
105   - },
106   - data() {
107   - return {
108   - deviceData: {
109   - onLine: 0,
110   - unLine: 0,
111   - noActive: 0
112   - },
113   - alertData: {
114   - noHandle: 0,
115   - doneHandle: 0,
116   - errorReport: 0
117   - }
118   - };
119   - },
120   - onLoad() {
121   - // 隐藏原生的tabbar
122   - uni.hideTabBar();
123   - this.getDeviceTotalData();
124   - uni.setStorageSync('getConfiguration', {
125   - isConfiguration: false
126   - });
127   - uni.removeStorageSync('getConfiguration');
128   - },
129   - methods: {
130   - ...mapActions(['updateBadgeTotal']),
131   - getDeviceTotalData() {
132   - uni.$u.http.get('/yt/homepage/app?login=false').then(res => {
133   - if (res) {
134   - this.deviceData.onLine = res.totalDevice?.onLine;
135   - this.deviceData.unLine = res.totalDevice?.offLine;
136   - this.deviceData.noActive = res.totalDevice?.inActive;
137   - this.alertData.noHandle = res.totalAlarm?.activedAlarm;
138   - this.alertData.doneHandle = res.totalAlarm?.clearedAck;
139   - this.alertData.errorReport = res.totalAlarm?.clearedUnack;
140   - //异步实时更新告警徽标数
141   - this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
142   - }
143   - });
144   - },
145   - showToastWip() {
146   - uni.$u.toast('拼命开发中 ...');
147   - },
148   - openCamera() {
149   - uni.navigateTo({
150   - url: 'camera/camera'
151   - });
  109 + export default {
  110 + components: {
  111 + fTabbar
152 112 },
153   - openOrgStatus() {
154   - uni.navigateTo({
155   - url: 'configuration/configuration'
156   - });
  113 + data() {
  114 + return {
  115 + deviceData: {
  116 + onLine: 0,
  117 + unLine: 0,
  118 + noActive: 0
  119 + },
  120 + alertData: {
  121 + noHandle: 0,
  122 + doneHandle: 0,
  123 + errorReport: 0
  124 + }
  125 + };
157 126 },
158   - //告警状态查询
159   - navigatorAlarmStatus(e) {
160   - uni.reLaunch({
161   - url: '../alarm/alarm?type=' + JSON.stringify(e)
  127 + onLoad() {
  128 + // 隐藏原生的tabbar
  129 + uni.hideTabBar();
  130 + this.getDeviceTotalData();
  131 + uni.setStorageSync('getConfiguration', {
  132 + isConfiguration: false
162 133 });
  134 + uni.removeStorageSync('getConfiguration');
163 135 },
164   - //设备状态查询
165   - navigatorDeviceStatus(e) {
166   - uni.reLaunch({
167   - url: `../device/device?deviceState=${e}`
168   - });
  136 + methods: {
  137 + ...mapActions(['updateBadgeTotal']),
  138 + getDeviceTotalData() {
  139 + uni.$u.http.get('/yt/homepage/app?login=false').then(res => {
  140 + if (res) {
  141 + this.deviceData.onLine = res.totalDevice?.onLine;
  142 + this.deviceData.unLine = res.totalDevice?.offLine;
  143 + this.deviceData.noActive = res.totalDevice?.inActive;
  144 + this.alertData.noHandle = res.totalAlarm?.activedAlarm;
  145 + this.alertData.doneHandle = res.totalAlarm?.clearedAck;
  146 + this.alertData.errorReport = res.totalAlarm?.clearedUnack;
  147 + //异步实时更新告警徽标数
  148 + this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
  149 + }
  150 + });
  151 + },
  152 + showToastWip() {
  153 + uni.$u.toast('拼命开发中 ...');
  154 + },
  155 + openCamera() {
  156 + uni.navigateTo({
  157 + url: 'camera/camera'
  158 + });
  159 + },
  160 + openOrgStatus() {
  161 + uni.navigateTo({
  162 + url: 'configuration/configuration'
  163 + });
  164 + },
  165 + //告警状态查询
  166 + navigatorAlarmStatus(e) {
  167 + uni.reLaunch({
  168 + url: '../alarm/alarm?type=' + JSON.stringify(e)
  169 + });
  170 + },
  171 + //设备状态查询
  172 + navigatorDeviceStatus(e) {
  173 + uni.reLaunch({
  174 + url: `../device/device?deviceState=${e}`
  175 + });
  176 + }
169 177 }
170   - }
171   -};
  178 + };
172 179 </script>
173 180
174 181 <style lang="scss" scoped>
175   -@import './static/index.scss';
  182 + @import './static/index.scss';
176 183 </style>
... ...
1 1 <template>
2   - <view
3   - class="login-page"
4   - style="background-size: 750rpx 1400rpx; min-height: 100vh;"
5   - :style="{ backgroundImage: 'url(' + (mpOwnConfig.bg !== undefined ? mpOwnConfig.bg : `${defaultLogo}`) + ')' }"
6   - >
  2 + <view class="login-page" style="background-size: 750rpx 1400rpx; min-height: 100vh" :style="{
  3 + backgroundImage:
  4 + 'url(' +
  5 + (mpOwnConfig.bg !== undefined ? mpOwnConfig.bg : `${defaultLogo}`) +
  6 + ')',
  7 + }">
7 8 <!-- 公共组件-每个页面必须引入 -->
8 9 <public-module></public-module>
9 10 <view class="u-flex login-main">
10 11 <view class="content">
11 12 <view class="hello login-text-muted">您好,</view>
12 13 <!-- <view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view> -->
13   - <view style="width:587rpx" class="text-clip hello-welcome login-text-muted">欢迎来到{{ mpOwnConfig.name !== undefined ? mpOwnConfig.name : 'ThingsKit' }}!</view>
  14 + <view style="width: 587rpx" class="text-clip hello-welcome login-text-muted">欢迎来到{{
  15 + mpOwnConfig.name !== undefined ? mpOwnConfig.name : "ThingsKit"
  16 + }}!</view>
14 17 </view>
15 18 </view>
16 19
17 20 <view class="f__login">
18 21 <view class="loginPhone">
19   - <view class="form-row u-flex"><u-input v-model="loginForm.username" type="text" placeholder="请输入登录账号" border="bottom" /></view>
  22 + <view class="form-row u-flex">
  23 + <u-input v-model="loginForm.username" type="text" placeholder="请输入登录账号" border="bottom" />
  24 + </view>
20 25
21 26 <view class="form-row u-flex">
22   - <u-input v-model="loginForm.password" :password="showPassword" placeholder="请输入登录密码" border="bottom">
  27 + <u-input v-model="loginForm.password" :password="showPassword" placeholder="请输入登录密码"
  28 + border="bottom">
23 29 <template slot="suffix">
24 30 <view @click="showPasswordMode" style="padding: 10rpx">
25   - <u-icon width="18" height="14" :name="showPassword ? '/static/eye-hide.png' : '/static/eye.png'"></u-icon>
  31 + <u-icon width="18" height="14" :name="
  32 + showPassword ? '/static/eye-hide.png' : '/static/eye.png'
  33 + "></u-icon>
26 34 </view>
27 35 </template>
28 36 </u-input>
29 37 </view>
30 38
31   - <button class="submit" size="default" @click="onSubmitFunc"><text class="text">登录</text></button>
  39 + <button class="submit" size="default" @click="onSubmitFunc">
  40 + <text class="text">登录</text>
  41 + </button>
32 42
33 43 <view class="u-flex row-item">
34 44 <view class="row-phone login-text-gray" @click="openCodeFunc">手机验证码登录</view>
... ... @@ -41,7 +51,9 @@
41 51
42 52 <view style="height: 20rpx"></view>
43 53
44   - <button class="link-image" @tap="onWenxinAuthorization"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></button>
  54 + <button class="link-image" @tap="onWenxinAuthorization">
  55 + <image class="image" src="../../static/weixin.png" mode="aspectFill"></image>
  56 + </button>
45 57 </view>
46 58 </view>
47 59 </view>
... ... @@ -49,246 +61,262 @@
49 61 </template>
50 62
51 63 <script>
52   -import { mapMutations, mapActions, mapState } from 'vuex';
53   -import { loginApp } from '@/config/login';
54   -import baseUrl from '@/config/baseUrl.js';
55   -import WXBizDataCrypt from '@/config/WXBizDataCrypt.js';
  64 + import {
  65 + mapMutations,
  66 + mapActions,
  67 + mapState
  68 + } from "vuex";
  69 + import {
  70 + loginApp
  71 + } from "@/config/login";
  72 + import baseUrl from "@/config/baseUrl.js";
  73 + import WXBizDataCrypt from "@/config/WXBizDataCrypt.js";
56 74
57   -export default {
58   - data() {
59   - return {
60   - loginForm: {
61   - username: '',
  75 + export default {
  76 + data() {
  77 + return {
  78 + loginForm: {
  79 + username: "",
62 80
63   - password: ''
64   - },
65   - showPassword: true,
66   - code: '',
67   - openid: '',
68   - mpOwnConfig: {},
69   - defaultLogo: '/static/login.png'
70   - };
71   - },
72   - onLoad() {
73   - wx.login({
74   - success: res => {
75   - if (res.code) {
76   - this.code = res.code;
77   - //这里获取openid
78   - } else {
79   - return;
80   - }
81   - }
82   - });
83   - },
84   - computed: {
85   - ...mapState(['plateInfo'])
86   - },
87   - mounted() {
88   - this.getPlateForm();
89   - },
90   - onShow() {
91   - this.getPlateForm();
92   - },
93   - methods: {
94   - //获取平台定制信息
95   - getPlateForm() {
96   - uni.$u.http.get('/yt/app_design/get').then(res => {
97   - if (res) {
98   - this.mpOwnConfig = {
99   - bg: res.background,
100   - logo: res.logo,
101   - name: res.name
102   - };
103   - }
  81 + password: "",
  82 + },
  83 + showPassword: true,
  84 + code: "",
  85 + openid: "",
  86 + mpOwnConfig: {},
  87 + defaultLogo: "/static/login.png",
  88 + };
  89 + },
  90 + onLoad() {
  91 + //#ifdef MP-WEIXIN
  92 + wx.login({
  93 + success: (res) => {
  94 + if (res.code) {
  95 + this.code = res.code;
  96 + //这里获取openid
  97 + } else {
  98 + return;
  99 + }
  100 + },
104 101 });
  102 + //#endif
  103 + },
  104 + computed: {
  105 + ...mapState(["plateInfo"]),
  106 + },
  107 + mounted() {
  108 + this.getPlateForm();
  109 + },
  110 + onShow() {
  111 + this.getPlateForm();
105 112 },
106   - ...mapMutations(['setUserInfo', 'setPlateInfo']),
107   - ...mapActions(['updateBadgeTotal']),
108   - //微信授权登录
109   - //#ifdef MP-WEIXIN
110   - onWenxinAuthorization() {
111   - wx.getUserProfile({
112   - desc: '微信第三方授权',
113   - success: reswenxin => {
114   - if (reswenxin.errMsg === 'getUserProfile:ok' && reswenxin.encryptedData) {
115   - //获取用户信息
116   - let obj = {
117   - avatarUrl: reswenxin.userInfo.avatarUrl,
118   - thirdUserId: this.openid
  113 + methods: {
  114 + //获取平台定制信息
  115 + getPlateForm() {
  116 + uni.$u.http.get("/yt/app_design/get").then((res) => {
  117 + if (res) {
  118 + this.mpOwnConfig = {
  119 + bg: res.background,
  120 + logo: res.logo,
  121 + name: res.name,
119 122 };
120   - //判断是否需要绑定
121   - uni.$u.http
122   - .get(`/yt/third/login/${this.code}`)
123   - .then(res => {
124   - if (res.token == '' || (res.token == null && res.thirdUserId)) {
125   - //需要绑定
126   - let userInfo = {
127   - isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号
128   - avatar: obj.avatarUrl,
129   - thirdUserId: res.thirdUserId
130   - };
131   - this.setUserInfo(userInfo);
132   - //设置全局变量openId
133   - getApp().globalData.openId = res.thirdUserId;
134   - uni.reLaunch({
135   - url: '../../pages/personal/personal'
136   - });
137   - } else {
138   - // 不需要绑定,直接第三方登录使用
139   - let resObj = {
140   - refreshToken: res.refreshToken,
141   - isToken: res.token
142   - };
143   - let userInfo = {
144   - ...resObj,
145   - token: true, //token用于判断是否登录
146   - isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号
147   - thirdUserId: res.thirdUserId
148   - };
149   - //设置全局变量openId
150   - getApp().globalData.openId = res.thirdUserId;
151   - if (userInfo.token) {
  123 + }
  124 + });
  125 + },
  126 + ...mapMutations(["setUserInfo", "setPlateInfo"]),
  127 + ...mapActions(["updateBadgeTotal"]),
  128 + //微信授权登录
  129 + //#ifdef MP-WEIXIN
  130 + onWenxinAuthorization() {
  131 + wx.getUserProfile({
  132 + desc: "微信第三方授权",
  133 + success: (reswenxin) => {
  134 + if (
  135 + reswenxin.errMsg === "getUserProfile:ok" &&
  136 + reswenxin.encryptedData
  137 + ) {
  138 + //获取用户信息
  139 + let obj = {
  140 + avatarUrl: reswenxin.userInfo.avatarUrl,
  141 + thirdUserId: this.openid,
  142 + };
  143 + //判断是否需要绑定
  144 + uni.$u.http
  145 + .get(`/yt/third/login/${this.code}`)
  146 + .then((res) => {
  147 + if (res.token == "" || (res.token == null && res.thirdUserId)) {
  148 + //需要绑定
  149 + let userInfo = {
  150 + isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号
  151 + avatar: obj.avatarUrl,
  152 + thirdUserId: res.thirdUserId,
  153 + };
152 154 this.setUserInfo(userInfo);
153   - }
154   - uni.showToast({
155   - title: '第三方账号登录成功',
156   - icon: 'none'
157   - }).then(async res => {
158   - this.saveUserInfo();
159   - await this.getAlarmTotalData();
  155 + //设置全局变量openId
  156 + getApp().globalData.openId = res.thirdUserId;
160 157 uni.reLaunch({
161   - url: '/pages/personal/personal'
  158 + url: "../../pages/personal/personal",
162 159 });
163   - });
164   - }
165   - })
166   - .catch(e => {
167   - if (e?.data?.data === null) {
168   - uni.$u.toast(e.data?.msg);
169   - }
170   - });
171   - }
172   - },
  160 + } else {
  161 + // 不需要绑定,直接第三方登录使用
  162 + let resObj = {
  163 + refreshToken: res.refreshToken,
  164 + isToken: res.token,
  165 + };
  166 + let userInfo = {
  167 + ...resObj,
  168 + token: true, //token用于判断是否登录
  169 + isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号
  170 + thirdUserId: res.thirdUserId,
  171 + };
  172 + //设置全局变量openId
  173 + getApp().globalData.openId = res.thirdUserId;
  174 + if (userInfo.token) {
  175 + this.setUserInfo(userInfo);
  176 + }
  177 + uni
  178 + .showToast({
  179 + title: "第三方账号登录成功",
  180 + icon: "none",
  181 + })
  182 + .then(async (res) => {
  183 + this.saveUserInfo();
  184 + await this.getAlarmTotalData();
  185 + uni.reLaunch({
  186 + url: "/pages/personal/personal",
  187 + });
  188 + });
  189 + }
  190 + })
  191 + .catch((e) => {
  192 + if (e?.data?.data === null) {
  193 + uni.$u.toast(e.data?.msg);
  194 + }
  195 + });
  196 + }
  197 + },
173 198
174   - fail: res => {
175   - //拒绝授权
  199 + fail: (res) => {
  200 + //拒绝授权
176 201
177   - return;
178   - }
179   - });
180   - },
  202 + return;
  203 + },
  204 + });
  205 + },
181 206
182   - //#endif
  207 + //#endif
183 208
184   - saveUserInfo() {
185   - //储存个人信息
186   - uni.$u.http.get('/yt/user/me/info').then(res => {
  209 + saveUserInfo() {
  210 + //储存个人信息
  211 + uni.$u.http.get("/yt/user/me/info").then((res) => {
  212 + if (res) {
  213 + this.setUserInfo(res);
  214 + }
  215 + });
  216 + //储存平台信息
  217 + uni.$u.http.get("/yt/platform/get").then((res) => {
  218 + if (res) {
  219 + this.setPlateInfo(res);
  220 + }
  221 + });
  222 + },
  223 + async getAlarmTotalData() {
  224 + const res = await uni.$u.http.get("/yt/homepage/app?login=true");
187 225 if (res) {
188   - this.setUserInfo(res);
  226 + //异步实时更新告警徽标数
  227 + this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
189 228 }
190   - });
191   - //储存平台信息
192   - uni.$u.http.get('/yt/platform/get').then(res => {
193   - if (res) {
194   - this.setPlateInfo(res);
  229 + },
  230 + onSubmitFunc() {
  231 + if (this.loginForm.username == "") {
  232 + return uni.$u.toast("请输入登录账号~");
195 233 }
196   - });
197   - },
198   - async getAlarmTotalData() {
199   - const res = await uni.$u.http.get('/yt/homepage/app?login=true');
200   - if (res) {
201   - //异步实时更新告警徽标数
202   - this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
203   - }
204   - },
205   - onSubmitFunc() {
206   - if (this.loginForm.username == '') {
207   - return uni.$u.toast('请输入登录账号~');
208   - }
209   - const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
  234 + const passReg =
  235 + /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
210 236
211   - if (this.loginForm.password == '') {
212   - uni.showToast({
213   - title: '请输入登录密码~',
  237 + if (this.loginForm.password == "") {
  238 + uni.showToast({
  239 + title: "请输入登录密码~",
214 240
215   - icon: 'none'
216   - });
217   - return;
218   - } else if (!passReg.test(this.loginForm.password)) {
219   - //uni.showToast,字数过长,会造成手机上显示不完全,官方bug,采用uni.showModal
220   - uni.showModal({
221   - title: '提示',
222   - content: '密码格式不正确(至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符)~',
223   - showCancel: false
224   - });
225   - return;
226   - }
227   - uni.$u.http
228   - .post('/auth/login', this.loginForm)
  241 + icon: "none",
  242 + });
  243 + return;
  244 + } else if (!passReg.test(this.loginForm.password)) {
  245 + //uni.showToast,字数过长,会造成手机上显示不完全,官方bug,采用uni.showModal
  246 + uni.showModal({
  247 + title: "提示",
  248 + content: "密码格式不正确(至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符)~",
  249 + showCancel: false,
  250 + });
  251 + return;
  252 + }
  253 + uni.$u.http
  254 + .post("/auth/login", this.loginForm)
229 255
230   - .then(res => {
231   - if (res) {
232   - // 储存登录信息
  256 + .then((res) => {
  257 + if (res) {
  258 + // 储存登录信息
233 259
234   - let resObj = {
235   - refreshToken: res.refreshToken,
  260 + let resObj = {
  261 + refreshToken: res.refreshToken,
236 262
237   - isToken: res.token
238   - };
  263 + isToken: res.token,
  264 + };
239 265
240   - let userInfo = {
241   - ...resObj,
  266 + let userInfo = {
  267 + ...resObj,
242 268
243   - token: true, //token用于判断是否登录
  269 + token: true, //token用于判断是否登录
244 270
245   - isThirdLogin: false,
246   - isThirdLoginAndNoDind: false
247   - };
  271 + isThirdLogin: false,
  272 + isThirdLoginAndNoDind: false,
  273 + };
248 274
249   - if (userInfo.token) {
250   - this.setUserInfo(userInfo);
251   - }
  275 + if (userInfo.token) {
  276 + this.setUserInfo(userInfo);
  277 + }
252 278
253   - uni.showToast({
254   - title: '登录成功~',
  279 + uni
  280 + .showToast({
  281 + title: "登录成功~",
255 282
256   - icon: 'none'
257   - }).then(async res => {
258   - this.saveUserInfo();
259   - await this.getAlarmTotalData();
260   - uni.reLaunch({
261   - url: '/pages/personal/personal'
262   - });
263   - });
264   - }
265   - })
  283 + icon: "none",
  284 + })
  285 + .then(async (res) => {
  286 + this.saveUserInfo();
  287 + uni.reLaunch({
  288 + url: "/pages/personal/personal",
  289 + });
  290 + await this.getAlarmTotalData();
  291 + });
  292 + }
  293 + })
266 294
267   - .catch(e => {
268   - uni.$u.toast(e.data?.message);
  295 + .catch((e) => {
  296 + uni.$u.toast(e.data?.message);
  297 + });
  298 + },
  299 + openCodeFunc() {
  300 + uni.navigateTo({
  301 + url: "../other/code",
269 302 });
  303 + },
  304 + findPassrordFunc() {
  305 + uni.navigateTo({
  306 + url: "../other/findPassword",
  307 + });
  308 + },
  309 + showPasswordMode() {
  310 + this.showPassword = !this.showPassword;
  311 + },
270 312 },
271   - openCodeFunc() {
272   - uni.navigateTo({
273   - url: '../other/code'
274   - });
275   - },
276   - findPassrordFunc() {
277   - uni.navigateTo({
278   - url: '../other/findPassword'
279   - });
280   - },
281   - showPasswordMode() {
282   - this.showPassword = !this.showPassword;
283   - }
284   - }
285   -};
  313 + };
286 314 </script>
287 315
288 316 <style lang="scss" scoped>
289   -@import './static/login.scss';
  317 + @import "./static/login.scss";
290 318
291   -/deep/ button {
292   - background: rgba(0, 0, 0, 0);
293   -}
  319 + /deep/ button {
  320 + background: rgba(0, 0, 0, 0);
  321 + }
294 322 </style>
... ...