详情tab

gongjinbao

2025-01-09 1ee3b9527eaf6790d60939336621892427ae933f

详情tab

 src/view/addOrder.vue

@@ -8,6 +8,15 @@
          <img class="clearfix_img" src="@/assets/addOrder/img2x.png" alt="" />
        </div>
        <div class="box-cards">
          <div class="flex tab">
            <div @click="activeTab = 1" :class="activeTab == 1 ? 'active' : 'noactive'">
              基础信息
            </div>
            <div @click="activeTab = 2" :class="activeTab == 2 ? 'active ml-56'  : 'noactive ml-56'">
              价格信息
            </div>

          </div>
          <div class="flex">

            <el-form-item label="" class="label1" prop="container" label-width="0">
@@ -312,7 +321,7 @@
            <span>选择已添加信息</span>
          </div>
        </div>
        <div class="" >
        <div class="">
          <div class="box-cards">
            <div class="flex">
              <el-form-item label="" class="label1" prop="contact" label-width="0">
@@ -370,9 +379,9 @@
              </el-form-item>
            </div>
            <div class="flex">
              <div class="tip_box">
              <div class="tip_box label5">

                <el-form-item label="" class="label5" prop="tel" label-width="0px">
                <el-form-item label="" class="" prop="tel" label-width="0px">
                  <div class="flex">
                    <div class="box">
                      <div class="flex">
@@ -414,32 +423,32 @@

          </div>

          
            <div class="flex " style="height: unset;padding-bottom: 20px;">
              <div class="box10">
                <div class="flex">
                  <!-- <div class="red">*</div> -->
                  <div class="box_text1">其他联系方式：</div>
                </div>
                <div class="box_text3">Other Information</div>
              </div>
              <quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption"
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
              </quill-editor>

            </div>
            <div class="flex " style="padding-bottom: 20px;">
              <div class="box10">
                <div class="flex">
                  <div class="box_text1">备注：</div>
                </div>
                <div class="box_text3">Remark</div>
          <div class="flex  mt-43" style="height: unset;padding-bottom: 43px;">
            <div class="box10">
              <div class="flex">
                <!-- <div class="red">*</div> -->
                <div class="box_text1">其他联系方式：</div>
              </div>
              <quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption"
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
              </quill-editor>
              <div class="box_text3">Other Information</div>
            </div>
         
            <quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>

          </div>
          <div class="flex " style="padding-bottom: 27px;">
            <div class="box10">
              <div class="flex">
                <div class="box_text1">备注：</div>
              </div>
              <div class="box_text3">Remark</div>
            </div>
            <quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>
          </div>


        </div>
      </el-card>
@@ -509,6 +518,7 @@
  },
  data() {
    return {
      activeTab: 1,
      form: {
        container: "", //集装箱号
        bol: "", //提单号
@@ -734,6 +744,53 @@
</script>

<style lang="less" scoped>
.tab{
  padding-bottom: 35px;
}
.noactive {
  font-weight: 500;
  font-size: 18px;
  color: #4C5065;
  line-height: 27px;
  text-align: left;
  font-style: normal;
}
.ml-56{
  margin-left: 56px;
}

.active {
  position: relative;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  color: #3B3F56;
  line-height: 27px;
  text-align: left;
  font-style: normal;
}

.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
  margin: auto;
  width: 21px;
  height: 5px;
  background: #014099;
  border-radius: 6px;
  transition: all 0.2s;
  /* 可选的过渡效果 */
}

.active:hover::after {
  width: 0;
  /* 鼠标悬停时下划线消失的效果 */

}

.box-cards {
  padding: 23px 0 0px 24px;
}
@@ -743,6 +800,8 @@
}

.editor {
  flex: 1;
  margin-right: 23px;

  ::v-deep .ql-container {
    height: 200px;
@@ -827,10 +886,7 @@
  justify-content: center;
}

.ql-editor {
  height: 243px;
  width: 100%;
}


.mr-14 {
  margin-right: 14px;