3018 按钮修改

cuiqian2004

2024-07-22 9ae83a12c2b9c764e28760fb9c3c09fe697c8990

 pages/modal/3018.vue

@@ -1,5 +1,5 @@
<template>
   <view class="content">
   <view class="uni-page-modal-3018">
      <view class="v-area" v-for="(classattr,index) in classAttrList">
         <div class="class_attr_title" style="display: none;">
            <div class="title_line"></div>
@@ -254,8 +254,11 @@
         </div>

      </view>
      <button type="default" @tap="cancel" class="btn_cancel">{{translateSys('cancel')}}</button>
      <button type="default" @tap="sava" class="btn_add">{{title}}</button>

      <view class="v-bottom"><button type="default" @tap="cancel"
            class="btn_cancel">{{translateSys('cancel')}}</button>
         <button type="default" @tap="sava" class="btn_add">{{title}}</button>
      </view>
      <!-- 普通弹窗 top bottom center left right -->
      <view>
         <uni-popup class="view-popup" ref="popup" background-color="#fff" @change="popupChange">
@@ -338,8 +341,11 @@
            popupParam: {},
         }
      },
      mounted() {
         console.log("3018 mounted");
      },
      onLoad(options) {
         // console.log(options);
         console.log("3018", options);
         uni.setNavigationBarTitle({
            title: options.titlename
         }); //设置顶部标题 
@@ -363,8 +369,7 @@
         }
         if (!param.Edit_dlg.Name) {
            uni.showModal({
               title: this.translateSys('tip')
               ",
               title: this.translateSys('tip'),
               content: this.translate('function_not_edit_dlg'),
               showCancel: false,
               confirmText: this.translateSys('cancel')
@@ -950,7 +955,6 @@
                     for (var j = 0; j < attr.length; j++) {
                        var ar = attr[j];
                        req.push(this.formatAttr(ar))

                     }
                  }
                  var info = {
@@ -1246,7 +1250,7 @@
         },
         add() {
            uni.showLoading({
               title: this.translateSys("loading")
               title: this.translateSys("loading"),
               mask: true
            });
            var req = [];
@@ -2347,360 +2351,379 @@
      }
   }
</script>
<style>
   .class_attr_title {
      font-size: 44rpx;
      padding-bottom: 22rpx;
      position: relative;
   }
<style lang="less">
   .uni-page-modal-3018 {
      display: flex;
      height: calc(100vh - 30rpx);
      width: 720rpx;
      flex-direction: column !important;
      padding: 15rpx;

   .class_attr_title .title_line {
      border-bottom: 2rpx solid #aaa;
      position: relative;
      bottom: -50rpx;
      width: calc(100% - 290rpx);
      margin-left: 100px;
   }
      .v-area {
         width: 100%;
         flex-direction: column !important;
      }

   .class_attr_title .title_icon {
      border-radius: 50%;
      width: 100rpx;
      line-height: 64rpx;
      display: inline-block;
      vertical-align: middle;
      padding-top: 10rpx;
      padding-left: 20rpx;
      text-align: center;
      color: #fff;
   }
      .v-bottom {
         display: block;
         width: calc(100% - 30rpx);
         padding: 10rpx 15rpx 20rpx 15rpx;
      }

   .class_attr_title i {
      color: #2c6aa0 !important;
   }
      .class_attr_title {
         font-size: 44rpx;
         padding-bottom: 22rpx;
         position: relative;
      }

   .class_attr_title .title_icon i {
      font-size: 80rpx;
   }
      .class_attr_title .title_line {
         border-bottom: 2rpx solid #aaa;
         position: relative;
         bottom: -50rpx;
         width: calc(100% - 290rpx);
         margin-left: 100px;
      }

   .class_attr_title .title {
      padding-right: 22rpx;
      display: inline-block;
      background-color: #fff;
      position: relative;
      bottom: -8rpx;
   }
      .class_attr_title .title_icon {
         border-radius: 50%;
         width: 100rpx;
         line-height: 64rpx;
         display: inline-block;
         vertical-align: middle;
         padding-top: 10rpx;
         padding-left: 20rpx;
         text-align: center;
         color: #fff;
      }

   .class_attr_title .arrow {
      position: absolute;
      top: 6rpx;
      right: 30rpx;
      font-size: 60rpx;
   }
      .class_attr_title i {
         color: #2c6aa0 !important;
      }

   input::-webkit-input-placeholder {
      font-size: 12rpx;
   }
      .class_attr_title .title_icon i {
         font-size: 80rpx;
      }

   textarea {
      width: 98%;
      border: 1px solid #d5d5d5;
      padding: 10rpx 8rpx 12rpx;
      background: #FFF;
      border-radius: 0 !important;
      font-size: 34rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
      color: #046db3;
      margin-top: 4px;
   }
      .class_attr_title .title {
         padding-right: 22rpx;
         display: inline-block;
         background-color: #fff;
         position: relative;
         bottom: -8rpx;
      }

   input {
      border: 1px solid #d5d5d5;
      width: 98%;
      height: 52rpx;
      background: #FFF;
      border-radius: 0 !important;
      color: #046db3;
      padding: 10rpx 8rpx 12rpx;
      font-size: 34rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
      margin-top: 4rpx;
   }
      .class_attr_title .arrow {
         position: absolute;
         top: 6rpx;
         right: 30rpx;
         font-size: 60rpx;
      }

   .select {
      width: 20px;
      position: absolute;
      opacity: 0;
   }
      input::-webkit-input-placeholder {
         font-size: 12rpx;
      }

   .class_attr_body .form-group {
      margin: 20rpx 30rpx;
      /* margin-left: -12px;
      textarea {
         width: 98%;
         border: 1px solid #d5d5d5;
         padding: 10rpx 8rpx 12rpx;
         background: #FFF;
         border-radius: 0 !important;
         font-size: 34rpx;
         font-family: inherit;
         box-shadow: none !important;
         transition-duration: 0.1s;
         color: #046db3;
         margin-top: 4px;
      }

      input {
         border: 1px solid #d5d5d5;
         width: 98%;
         height: 52rpx;
         background: #FFF;
         border-radius: 0 !important;
         color: #046db3;
         padding: 10rpx 8rpx 12rpx;
         font-size: 34rpx;
         font-family: inherit;
         box-shadow: none !important;
         transition-duration: 0.1s;
         margin-top: 4rpx;
      }

      .select {
         width: 20px;
         position: absolute;
         opacity: 0;
      }

      .class_attr_body .form-group {
         margin: 20rpx 30rpx;
         /* margin-left: -12px;
       margin-right: -12px; */
   }
      }

   .form-group>label[class*="col-"] {
      margin-bottom: 8rpx;
      font-size: 32rpx;
   }
      .form-group>label[class*="col-"] {
         margin-bottom: 8rpx;
         font-size: 32rpx;
      }

   .form-group label {
      vertical-align: middle;
      line-height: 60rpx;
   }
      .form-group label {
         vertical-align: middle;
         line-height: 60rpx;
      }

   .no-padding-right {
      padding-right: 0 !important;
   }
      .no-padding-right {
         padding-right: 0 !important;
      }

   .col-xs-12 {
      width: 100%;
   }
      .col-xs-12 {
         width: 100%;
      }

   .tx_title {
      font-size: 32rpx;
   }
      .tx_title {
         font-size: 32rpx;
      }

   .tx_title2 {
      font-size: 32rpx;
      text-align: right;
      display: inline-block;
      vertical-align: -2px;
   }
      .tx_title2 {
         font-size: 32rpx;
         text-align: right;
         display: inline-block;
         vertical-align: -2px;
      }

   .text-right {
      margin-right: 20rpx;
      margin-top: -6rpx;
      display: inline-block;
      float: right;
      font-size: 48rpx;
   }
      .text-right {
         margin-right: 20rpx;
         margin-top: -6rpx;
         display: inline-block;
         float: right;
         font-size: 48rpx;
      }

   .text-right a,
   .text-right2 a {
      color: #337ab7;
   }
      .text-right a,
      .text-right2 a {
         color: #337ab7;
      }

   .text-right2 {
      margin: 0;
      vertical-align: -4px;
      margin-left: 9px;
      float: none;
      font-size: 48rpx;
      display: inline-block;
   }
      .text-right2 {
         margin: 0;
         vertical-align: -4px;
         margin-left: 9px;
         float: none;
         font-size: 48rpx;
         display: inline-block;
      }

   .section_iput {
      border: 1px solid #d5d5d5;
      width: 98%;
      height: 62rpx;
      background: #FFF;
      border-radius: 0 !important;
      color: #046db3;
      padding: 10rpx 8rpx 10rpx;
      font-size: 34rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
   }
      .section_iput {
         border: 1px solid #d5d5d5;
         width: 98%;
         height: 62rpx;
         background: #FFF;
         border-radius: 0 !important;
         color: #046db3;
         padding: 10rpx 8rpx 10rpx;
         font-size: 34rpx;
         font-family: inherit;
         box-shadow: none !important;
         transition-duration: 0.1s;
      }

   .date_iput {
      border: 1px solid #d5d5d5;
      /* width: 98%; */
      height: 62rpx;
      background: #FFF;
      border-radius: 0 !important;
      color: #046db3;
      padding: 10rpx 8rpx 4rpx;
      font-size: 34rpx;
      font-family: inherit;
      box-shadow: none !important;
      transition-duration: 0.1s;
   }
      .date_iput {
         border: 1px solid #d5d5d5;
         /* width: 98%; */
         height: 62rpx;
         background: #FFF;
         border-radius: 0 !important;
         color: #046db3;
         padding: 10rpx 8rpx 4rpx;
         font-size: 34rpx;
         font-family: inherit;
         box-shadow: none !important;
         transition-duration: 0.1s;
      }

   button.btn_add {
      width: 49.5%;
      margin-top: 50rpx;
      padding: 20rpx;
      line-height: 1.5;
      background: #27A6E1;
      border: none;
      color: #fff;
      font-size: 38rpx;
      font-weight: bold;
      float: right;
      display: inline-block;
   }
      button.btn_add {
         width: 49.5%;
         margin-top: 50rpx;
         padding: 20rpx;
         line-height: 1.5;
         background: #27A6E1;
         border: none;
         color: #fff;
         font-size: 38rpx;
         font-weight: bold;
         float: right;
         display: inline-block;
      }

   button.btn_cancel {
      width: 49.5%;
      margin-top: 50rpx;
      padding: 20rpx;
      line-height: 1.5;
      background: #27A6E1;
      border: none;
      color: #fff;
      font-size: 38rpx;
      font-weight: bold;
      float: left;
      display: inline-block;
   }
      button.btn_cancel {
         width: 49.5%;
         margin-top: 50rpx;
         padding: 20rpx;
         line-height: 1.5;
         background: #27A6E1;
         border: none;
         color: #fff;
         font-size: 38rpx;
         font-weight: bold;
         float: left;
         display: inline-block;
      }

   .i_tishi {
      color: red;
      vertical-align: sub;
      font-style: initial;
      margin-left: 20rpx;
      font-size: 17px;
   }
      .i_tishi {
         color: red;
         vertical-align: sub;
         font-style: initial;
         margin-left: 20rpx;
         font-size: 17px;
      }

   .attr_field {
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px;
      /* width: 71%; */
   }
      .attr_field {
         display: inline-block;
         vertical-align: middle;
         margin-left: 8px;
         /* width: 71%; */
      }

   .input_vallist {
      max-height: 350rpx;
      overflow-y: auto;
      display: none;
   }
      .input_vallist {
         max-height: 350rpx;
         overflow-y: auto;
         display: none;
      }

   .input_vallist ul {
      /* border: 1px solid red; */
      padding: 0 20rpx;
   }
      .input_vallist ul {
         /* border: 1px solid red; */
         padding: 0 20rpx;
      }

   .input_vallist ul li {
      list-style: none;
      padding: 20rpx;
      border-bottom: 1px solid #ccc;
   }
      .input_vallist ul li {
         list-style: none;
         padding: 20rpx;
         border-bottom: 1px solid #ccc;
      }

   .input_vallist ul li a {
      float: right;
   }
      .input_vallist ul li a {
         float: right;
      }

   .input_vallist ul li a i {
      font-size: 45rpx;
   }
      .input_vallist ul li a i {
         font-size: 45rpx;
      }

   .view-popup {
      position: relative;
   }
      .view-popup {
         position: relative;
      }

   .popup-content {
      @include flex;
      align-items: center;
      justify-content: center;
      padding: 30rpx;
      background-color: #fff;
      /* height: 150px; */
      /* border: 1px solid red; */
   }
      .popup-content {
         @include flex;
         align-items: center;
         justify-content: center;
         padding: 30rpx;
         background-color: #fff;
         /* height: 150px; */
         /* border: 1px solid red; */
      }

   .popup-cont {
      overflow-y: auto;
      /* border: 1px solid red; */
   }
      .popup-cont {
         overflow-y: auto;
         /* border: 1px solid red; */
      }

   .popup-height {
      @include height;
      /* width: 200px; */
   }
      .popup-height {
         @include height;
         /* width: 200px; */
      }

   .popup-header {
      font-size: 42rpx;
      font-weight: bold;
      margin: 20rpx 20rpx 0px 20rpx;
   }
      .popup-header {
         font-size: 42rpx;
         font-weight: bold;
         margin: 20rpx 20rpx 0px 20rpx;
      }

   .view_popup_CheckList {
      margin-bottom: 20rpx;
   }
      .view_popup_CheckList {
         margin-bottom: 20rpx;
      }

   .popup-footer {
      float: right;
      position: absolute;
      bottom: 0;
      right: 20rpx;
   }
      .popup-footer {
         float: right;
         position: absolute;
         bottom: 0;
         right: 20rpx;
      }

   button.btn_popup_add {
      width: 180rpx;
      margin-top: 50rpx;
      margin-right: 20rpx;
      padding: 15rpx;
      line-height: 1.5;
      background: #27A6E1;
      border: none;
      color: #fff;
      font-size: 38rpx;
      font-weight: bold;
      /* float: left; */
      display: inline-block;
   }
      button.btn_popup_add {
         width: 180rpx;
         margin-top: 50rpx;
         margin-right: 20rpx;
         padding: 15rpx;
         line-height: 1.5;
         background: #27A6E1;
         border: none;
         color: #fff;
         font-size: 38rpx;
         font-weight: bold;
         /* float: left; */
         display: inline-block;
      }

   button.btn_popup_cancel {
      width: 180rpx;
      margin-top: 50rpx;
      padding: 15rpx;
      line-height: 1.5;
      background: #27A6E1;
      border: none;
      color: #fff;
      font-size: 38rpx;
      font-weight: bold;
      /* float: right; */
      display: inline-block;
   }
</style>
<style>
   .touch-item {
      background-color: #F8F9FC;
      display: flex;
      justify-content: space-between;
      width: 100%;
      overflow: hidden
   }
      button.btn_popup_cancel {
         width: 180rpx;
         margin-top: 50rpx;
         padding: 15rpx;
         line-height: 1.5;
         background: #27A6E1;
         border: none;
         color: #fff;
         font-size: 38rpx;
         font-weight: bold;
         /* float: right; */
         display: inline-block;
      }

   .itemcontent {
      display: flex;
      flex-direction: column;
      padding: 5px 10px;
      border-bottom: 1px solid #eeeeee;
      margin-right: 0;
      margin-left: -100px;
      width: 100%;
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
      position: relative;
   }

   .itembtn {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #119bf8;
      color: white;
      position: relative;
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
   }
      .touch-item {
         background-color: #F8F9FC;
         display: flex;
         justify-content: space-between;
         width: 100%;
         overflow: hidden
      }

   .touch-move-active .itemcontent,
   .touch-move-active .itembtn {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      .itemcontent {
         display: flex;
         flex-direction: column;
         padding: 5px 10px;
         border-bottom: 1px solid #eeeeee;
         margin-right: 0;
         margin-left: -100px;
         width: 100%;
         -webkit-transition: all 0.4s;
         transition: all 0.4s;
         -webkit-transform: translateX(100px);
         transform: translateX(100px);
         position: relative;
      }

      .itembtn {
         width: 100px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: #119bf8;
         color: white;
         position: relative;
         -webkit-transform: translateX(100px);
         transform: translateX(100px);
         -webkit-transition: all 0.4s;
         transition: all 0.4s;
      }

      .touch-move-active .itemcontent,
      .touch-move-active .itembtn {
         -webkit-transform: translateX(0);
         transform: translateX(0);
      }
   }
</style>