1.

unpackage/dist/dev/mp-weixin/components/cyl-view/cyl-view.wxss

@@ -0,0 +1,57 @@
+.cyl_view {
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+.cyl_view .top {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+}
+.cyl_view .top .child_1 {
+  color: #2B2B2B;
+  font-size: 28rpx;
+  font-weight: bold;
+}
+.cyl_view .top .child_2 {
+  color: #71675D;
+  font-size: 24rpx;
+  margin: 0 10rpx;
+}
+.cyl_view .top .child_3 {
+  border: 1rpx solid #F3C368;
+  border-radius: 5rpx;
+  padding: 0 5rpx;
+  color: #F2C369;
+  font-size: 24rpx;
+}
+.cyl_view .center {
+  margin: 20rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  font-weight: 500;
+}
+.cyl_view .center .child {
+  background-color: #F5F5F5;
+  border-radius: 10rpx 10rpx 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #939393;
+  padding: 10rpx 40rpx;
+}
+.cyl_view .center .child.action {
+  background-color: #F2C369;
+  color: #070707;
+}
+.cyl_view .bottom .type {
+  display: grid;
+  grid-template-columns: 1fr 19rpx 1fr 19rpx 1fr;
+  gap: 6rpx;
+}
+.cyl_view .bottom .type .item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}