完成主页布局样式，添加余额记录页面，封装navbar组件

Liuyi

2024-09-21 a605dd0aac8d3f7e87c2e8858cce944e2a2f43fe

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

@@ -47,11 +47,139 @@
  background-repeat: no-repeat;
  background-size: 100%;
}
.card-box .card .card-content.data-v-1cf27b2a {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 14rpx 42rpx 64rpx 22rpx;
}
.card-box .card .card-content .card-title.data-v-1cf27b2a {
  width: 100%;
  height: 64rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.card-box .card .card-content .card-title view.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 36rpx;
  color: #FFFFFF;
  letter-spacing: 5rpx;
  text-align: left;
}
.card-box .card .card-content .card-title image.data-v-1cf27b2a {
  width: 64rpx;
  height: 64rpx;
}
.card-box .card .card-content .card-add.data-v-1cf27b2a {
  width: 100%;
  height: 64rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.card-box .card .card-content .card-add view.data-v-1cf27b2a {
  width: 172rpx;
  height: 38rpx;
  border-radius: 24rpx;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card-box .card .card-content .card-add view image.data-v-1cf27b2a {
  width: 22rpx;
  height: 22rpx;
  margin-left: 15rpx;
}
.card-box .card .card-content .card-add view text.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 20rpx;
  color: #0088FF;
  margin-left: 15rpx;
}
.card-box .card .card-content .card-info.data-v-1cf27b2a {
  width: 100%;
  height: 100rpx;
  margin-top: 18rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card-box .card .card-content .card-info .info-head.data-v-1cf27b2a {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}
.card-box .card .card-content .card-info .info-head image.data-v-1cf27b2a {
  width: 100rpx;
  height: 100rpx;
}
.card-box .card .card-content .card-info .info-content.data-v-1cf27b2a {
  width: 216rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.card-box .card .card-content .card-info .info-content .info-content-top.data-v-1cf27b2a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}
.card-box .card .card-content .card-info .info-content .info-content-top view.data-v-1cf27b2a:first-child {
  width: 108rpx;
  height: 50rpx;
  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  text-align: left;
}
.card-box .card .card-content .card-info .info-content .info-content-top view.data-v-1cf27b2a:last-child {
  width: 86rpx;
  height: 32rpx;
  font-weight: 300;
  font-size: 26rpx;
  color: #FFFFFF;
  text-align: center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAQCAYAAACP4IauAAAAAXNSR0IArs4c6QAAAdxJREFUSEvNlr1LHFEUxe85d3ZnEvGjt5RowgpbaJvKNGIVsisEQsAmJllm/UC0SJ3WTaNs0oh/RNKIzbo2SaMkLIhY2llIEg3ix8i8mdFRRMzoDk4zb97c995vzpz37oVcul79mO7xPH0L0SFCO0F9SFAAFVAlapNhH1SiNk0Mxdz9MSY+3nce678n/bhwziB2H9BtUr+KxeqMk9+I4yF66Pv8JtOdb/sonk6QapnJLgFeBRvBBIveDvYCOHkEZiqb9r8PX9B/6HMa2MFvrt3WnlkC9On5F98M1iwQqnynsNHfBOtZJ/usjEcHBna4PlaF6Kiv3P/CNk3Z0ErGKsLqpPP4HV7USzkVax2imgS22cqGvj4WYR6FmlsBOB75814qG2zWTyjWyg0BniSFTUdZs38aKNbcvwK2JIVNxbOBsnu+DX4DbE0Km5ayoP5BccX9KcLepLBpKUvoLxRq5VkAE0lh01JWoBU8Xy33WidYI5IdXWkoS+ixl2U+SAqrY3Pw9P29PWep85PZntKt023zlWU9Y8fSrakPNl27fefBHIERQHnTQqZpnqWeAFywHafk1wVnhUy8DHv5fSZHz3oNcIBkF6Ad15WId6osdZfQLQDLlucsTrXmGnG2Ux7nYTiYHiPjAAAAAElFTkSuQmCC");
}
.card-box .card .card-content .card-info .info-content .info-content-bottom.data-v-1cf27b2a {
  width: 100%;
  font-weight: 300;
  font-size: 20rpx;
  color: #FFFFFF;
  letter-spacing: 5rpx;
  text-align: left;
}
.card-box .card .card-content .card-info .info-more.data-v-1cf27b2a {
  width: 12rpx;
  height: 28rpx;
  margin-left: 274rpx;
}
.card-box .card .card-content .card-info .info-more image.data-v-1cf27b2a {
  width: 12rpx;
  height: 28rpx;
}
.card-box .card .card-content .card-bottom.data-v-1cf27b2a {
  margin-top: 36rpx;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  font-weight: 300;
  font-size: 20rpx;
  color: #D8D8D8;
  line-height: 0rpx;
  text-align: center;
}
.function-box1.data-v-1cf27b2a {
  width: 100%;
  box-sizing: border-box;
  height: 264rpx;
  padding: 32rpx;
  height: 227rpx;
  padding: 20rpx 32rpx 15rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -63,11 +191,80 @@
  background: #fff;
  box-shadow: 0 0 12rpx 2rpx rgba(13, 118, 255, 0.16);
}
.function-box1 .box1-one.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 32rpx;
  color: #000000;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.function-box1 .box1-one image.data-v-1cf27b2a {
  width: 86rpx;
  height: 78rpx;
  margin-bottom: 20rpx;
}
.function-box1 .box1-two.data-v-1cf27b2a {
  box-sizing: border-box;
  padding: 25rpx 0 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.function-box1 .box1-two view.data-v-1cf27b2a:first-child {
  font-weight: 300;
  font-size: 24rpx;
  color: #464646;
  text-align: center;
  margin-bottom: 10rpx;
}
.function-box1 .box1-two .recharge text.data-v-1cf27b2a:first-child {
  font-weight: 500;
  font-size: 32rpx;
  color: #000;
}
.function-box1 .box1-two .recharge text.data-v-1cf27b2a:last-child {
  font-weight: 300;
  font-size: 32rpx;
  color: #2269E5;
}
.function-box1 .box1-two view.data-v-1cf27b2a:last-child {
  width: 140rpx;
  height: 80rpx;
  font-weight: 300;
  font-size: 24rpx;
  color: #000141;
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
  line-height: 80rpx;
  margin-top: 10rpx;
}
.function-box1 .box1-three.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 32rpx;
  color: #000000;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.function-box1 .box1-three image.data-v-1cf27b2a {
  width: 83rpx;
  height: 83rpx;
  margin-bottom: 20rpx;
}
.function-box2.data-v-1cf27b2a {
  width: 100%;
  box-sizing: border-box;
  height: 460rpx;
  padding: 0 32rpx 32rpx;
  height: 443rpx;
  padding: 0 32rpx 15rpx;
}
.function-box2 .box2-title.data-v-1cf27b2a {
  width: 100%;
@@ -80,7 +277,7 @@
}
.function-box2 .box2-content.data-v-1cf27b2a {
  box-sizing: border-box;
  padding: 30rpx 50rpx;
  padding: 22rpx 35rpx;
  width: 686rpx;
  height: 374rpx;
  background: #fff;
@@ -92,13 +289,16 @@
  align-items: center;
}
.function-box2 .box2-content .box2-item.data-v-1cf27b2a {
  width: 120rpx;
  height: 130rpx;
  width: 146rpx;
  height: 143rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.function-box2 .box2-content .box2-item image.data-v-1cf27b2a {
  width: 90rpx;
  height: 90rpx;
  margin: 0 auto;
}
.function-box2 .box2-content .box2-item .box2-item-text.data-v-1cf27b2a {
  width: 100%;
@@ -108,7 +308,83 @@
  color: #000000;
  text-align: center;
}
button.data-v-1cf27b2a {
  width: 100rpx;
  height: 50rpx;
.advertisement-box.data-v-1cf27b2a {
  width: 100%;
  height: 188rpx;
  padding: 0 32rpx 10rpx;
  box-sizing: border-box;
}
.advertisement-box image.data-v-1cf27b2a {
  width: 100%;
  height: 178rpx;
}
.service-box.data-v-1cf27b2a {
  width: 100%;
  height: 255rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.service-box .service-title.data-v-1cf27b2a {
  height: 44rpx;
  font-weight: 300;
  font-size: 32rpx;
  color: #000000;
  text-align: left;
  margin-bottom: 5rpx;
  margin-left: 30rpx;
}
.service-box .service-content.data-v-1cf27b2a {
  width: 100%;
  height: 206rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service-box .service-content .service-bg.data-v-1cf27b2a {
  width: 330rpx;
  height: 206rpx;
  background: linear-gradient(to bottom, #AFD5FF, #FFFFFF);
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.service-box .service-content .service-bg view.data-v-1cf27b2a:first-child {
  display: flex;
  align-items: center;
  margin-left: 40rpx;
}
.service-box .service-content .service-bg view:first-child image.data-v-1cf27b2a {
  width: 48rpx;
  height: 48rpx;
  margin-right: 10rpx;
}
.service-box .service-content .service-bg view:first-child text.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 28rpx;
  color: #000000;
}
.service-box .service-content .service-bg .service-info.data-v-1cf27b2a {
  width: 214rpx;
  font-weight: 300;
  font-size: 24rpx;
  color: #4D4B4B;
  margin-left: 96rpx;
}
.service-box .service-content .service-bg view.data-v-1cf27b2a:last-child {
  margin-left: 174rpx;
  margin-top: 18rpx;
  display: flex;
  align-items: center;
}
.service-box .service-content .service-bg view:last-child image.data-v-1cf27b2a {
  width: 32rpx;
  height: 32rpx;
}
.service-box .service-content .service-bg view:last-child text.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 24rpx;
  color: #4D4B4B;
  margin-right: 10rpx;
}