Bladeren bron

feature:增加木鱼的界面

zeng.chen 1 jaar geleden
bovenliggende
commit
ce82d07cb1
3 gewijzigde bestanden met toevoegingen van 240 en 1 verwijderingen
  1. 23 0
      pages/piano/woodenfish/woodenfish.js
  2. 54 0
      pages/piano/woodenfish/woodenfish.wxml
  3. 163 1
      pages/piano/woodenfish/woodenfish.wxss

+ 23 - 0
pages/piano/woodenfish/woodenfish.js

@@ -1,5 +1,8 @@
 // pages/piano/woodenfish/woodenfish.js
 /// 钢琴音响木鱼界面
+
+const { request } = require("../../../utils/util")
+
 Page({
 
   /**
@@ -10,6 +13,26 @@ Page({
       showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
       title: '木鱼', //导航栏 中间的标题
     },
+    selTypeList: [{"url":"","name":"木鱼1"},{"url":"","name":"木鱼2"},{"url":"","name":"木鱼3"}],
+    option1: [
+      { text: '全部商品', value: 0 },
+      { text: '新款商品', value: 1 },
+      { text: '活动商品', value: 2 },
+    ],
+    option2: [
+      { text: '默认排序', value: 'a' },
+      { text: '好评排序', value: 'b' },
+      { text: '销量排序', value: 'c' },
+    ],
+    value1: 0,
+    value2: 'a',
+    calender_marks:{
+      "vibrate": false,
+      "customNavBar":false
+    }
+
+  },handleLoad(){
+
   },
 
   /**

+ 54 - 0
pages/piano/woodenfish/woodenfish.wxml

@@ -1,4 +1,58 @@
 <view>
   <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'>
   </nav-bar>
+
+  <view class="container">
+
+    <scroll-view class="scroll_c" scroll-y="true">
+
+      <view class="detail_page_c">
+        <text class="detail_page_title">功德日历</text>
+        <span> <text class="detail_page_btn">查看数据榜单</text>
+          <image class="detail_page_btn_img" src="../../../img/a.png" mode="scaleToFill" />
+        </span>
+      </view>
+
+<view class="calender_c"></view>
+      <!-- <calendar class="calender_c" id="calendar" bindload="handleLoad" CalendarProp="{{calender_marks}}"  /> -->
+
+      <view class="detail_c">
+        <text class="detail_time">2024-04-23</text>
+        <text class="detail_count">2024</text>
+        <text class="detail_duration">16h</text>
+      </view>
+
+      <view class="sel_type_c">
+        <text class="sel_type_title">木鱼选择</text>
+        <view class="sel_type_row">
+          <view class="sel_type_row_item" wx:for="{{selTypeList}}" wx:key="item">
+            <image class="sel_type_row_item_img" src="../../../img/a.png" mode="scaleToFill" />
+            <text class="sel_type_row_item_title">{{item.name}}</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="set_c">
+        <text class="title_c">设置</text>
+        <view class="audio_c">
+          <text class="select_audio_title">音效选择</text>
+          <view class="select_audio"></view>
+          <!-- <van-dropdown-menu class="select_audio">
+            <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+            <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+
+          </van-dropdown-menu> -->
+        </view>
+        <view class="time_c">
+          <text class="select_duration_title">敲击间隔</text>
+<view class="select_duration"></view>
+        </view>
+
+      </view>
+
+
+    </scroll-view>
+
+  </view>
+
 </view>

+ 163 - 1
pages/piano/woodenfish/woodenfish.wxss

@@ -1 +1,163 @@
-/* pages/piano/woodenfish/woodenfish.wxss */
+/* pages/piano/woodenfish/woodenfish.wxss */
+
+.container {
+  height: 100%;
+  /* width: 100%; */
+  /* display: flex; */
+  padding-left: 16rpx;
+  padding-right: 16rpx;
+  /* margin-right: 0%; */
+  /* position: fixed; */
+  flex: 1;
+
+}
+
+.container .scroll_c {
+  /* display: flex; */
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  /* background-color: darkolivegreen; */
+}
+
+.container .scroll_c .detail_page_c {
+  margin-top: 16rpx;
+  height: 44rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.container .scroll_c .detail_page_c .detail_page_title {
+}
+
+.container .scroll_c .detail_page_c .detail_page_btn {
+  justify-content: center;
+}
+
+.container .scroll_c .detail_page_c .detail_page_btn_img {
+  margin-left: 16rpx;
+  height: 16rpx;
+width: 16rpx;
+}
+
+/* .container .scroll_c  .calender_c { 
+  margin-top: 16rpx;
+  height: 360rpx;
+  width: 100%;
+} */
+
+.container .scroll_c .detail_c {
+  margin-top: 16rpx;
+  height: 160rpx;
+  width: 100%;
+  flex-direction: column;
+  /* position: fixed; */
+}
+
+.container .scroll_c .detail_c  .detail_time {
+  width: 100%;
+  display: flex;
+}
+
+.container .scroll_c .detail_c  .detail_count{
+  width: 100%;
+  display: flex;
+}
+
+.container .scroll_c .detail_c  .detail_duration {
+  width: 100%;
+  display: flex;
+}
+
+
+.container .scroll_c .sel_type_c {
+  margin-top: 16rpx;
+  height: 200rpx;
+  width: 100%;
+  flex-direction: column;
+}
+
+.container .scroll_c .sel_type_c .sel_type_title {
+  margin-top: 16rpx;
+  width: 100%;
+}
+
+.container .scroll_c  .sel_type_c .sel_type_row {
+  width: 100%;
+  /* flex-direction: row; */
+  justify-content: space-around;
+  display: flex;
+}
+
+.container .scroll_c  .sel_type_c .sel_type_row {
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-around;
+  display: flex;
+  background-color: darkolivegreen;
+  margin-top: 16rpx;
+}
+
+
+.container .scroll_c .sel_type_c .sel_type_row .sel_type_row_item {
+  width: 80rpx;
+  flex-direction: column;
+  display: flex;
+}
+
+
+.container .scroll_c  .sel_type_c .sel_type_row .sel_type_row_item .sel_type_row_item_img {
+  width: 80rpx;
+  height: 80rpx;
+}
+
+.sel_type_row_item_title {
+  width: 80rpx;
+  font-size: 24rpx;
+}
+
+
+.container .scroll_c  .set_c {
+  margin-top: 16rpx;
+  width: 100%;
+  flex-direction: column;
+  background-color: darkseagreen;
+}
+
+.container .scroll_c  .set_c .title_c {
+  width: 100%;
+  margin-top: 16rpx;
+  margin-bottom: 16rpx;
+
+}
+.container .scroll_c  .set_c .audio_c {
+  flex-direction: row;
+  display: flex;
+}
+
+.container .scroll_c  .set_c .audio_c .select_audio_title {
+  margin-left: 16rpx;
+  margin-right: 16rpx;
+}
+.container .scroll_c  .set_c .audio_c .select_audio {
+  margin-left: 16rpx;
+  margin-right: 16rpx;
+  background-color: darkslateblue;
+  flex: 1;
+}
+
+.container .scroll_c  .set_c .time_c {
+  flex-direction: row;
+  display: flex;
+}
+
+
+.container .scroll_c  .set_c .time_c .select_duration_title {
+  margin-left: 16rpx;
+  margin-right: 16rpx;
+}
+.container .scroll_c  .set_c .time_c .select_duration {
+  margin-left: 16rpx;
+  margin-right: 16rpx;
+}