m2pool_web_frontend/mining-pool/src/views/submitWorkOrder/index.vue

<template>
  <div class="submitWorkOrder" v-loading="submitWorkOrderLoading">
      
    <section v-if="$isMobile"  class="WorkOrder">
      <h3>{{ $t(`work.SubmitWK`) }}</h3>

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
       
          <el-form-item :label="$t(`work.problem`)" prop="desc">
            <el-input
                 style="width: 100%;"
                type="textarea"
                resize="none"
                :autosize="{ minRows: 5, maxRows: 10}"
                :placeholder="$t(`work.PleaseEnter`)"
                maxlength="250"
                show-word-limit
                v-model="ruleForm.desc">
                </el-input>
            </el-form-item>
            
       
        <el-form-item style="width: 100%;">
          <div style="width: 100%;font-weight: 600;color: rgba(0,0,0,0.7);">{{ $t(`work.enclosure`) }}</div>
          <p class="prompt">
            {{ $t(`work.fileType`) }}：jpg, jpeg, png, mp3, aif, aiff, wav, wma,
            mp4, avi, rmvb
          </p>

          <el-upload
            class="upload-demo"
            ref="upload"
            drag
            action
            multiple
            :limit="fileLimit"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :file-list="fileList"
            :on-change="handelChange"
            show-file-list
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              {{ $t(`work.fileCharacters`)
              }}<em> {{ $t(`work.fileCharacters2`) }}</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>         
            <el-button
            @click="submitForm"        
            type="plain"
            style="width: 200px"
            class="elBtn"
          >
            {{ $t(`work.submit`) }}</el-button
          >
        </el-form-item>
      </el-form>
    </section>




    <section class="WorkOrder" v-else>
        <h3>{{ $t(`work.SubmitWK`) }}</h3>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
       
          <el-form-item :label="$t(`work.problem`)" prop="desc">
            <el-input
                 style="width: 100%;"
                type="textarea"
                resize="none"
                :autosize="{ minRows: 5, maxRows: 10}"
                :placeholder="$t(`work.PleaseEnter`)"
                maxlength="250"
                show-word-limit
                v-model="ruleForm.desc">
                </el-input>
        </el-form-item>
     
       
        <el-form-item style="width: 50%;">
          <div style="width: 100%;font-weight: 600;color: rgba(0,0,0,0.7);">{{ $t(`work.enclosure`) }}</div>
          <p class="prompt">
            {{ $t(`work.fileType`) }}：jpg, jpeg, png, mp3, aif, aiff, wav, wma,
            mp4, avi, rmvb
          </p>

          <el-upload
            class="upload-demo"
            ref="upload"
            drag
            action
            multiple
            :limit="fileLimit"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :file-list="fileList"
            :on-change="handelChange"
            show-file-list
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              {{ $t(`work.fileCharacters`)
              }}<em> {{ $t(`work.fileCharacters2`) }}</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>         
            <el-button
            @click="submitForm"        
            type="plain"
            style="width: 200px"
            class="elBtn"
          >
            {{ $t(`work.submit`) }}</el-button
          >
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
  // 手机端适配
@media screen and (min-width: 220px) and (max-width:1279px) {

  
.submitWorkOrder {
  width: 100%;
  min-height: 300px;
  background: transparent !important; 
  padding:0 !important;
}

.WorkOrder {
  width: 100% !important;
  margin: 0 auto;
  // background: #fff;
  padding: 10px 18px !important;
  border-radius: 8px;
  transition: all 0.2s linear;
 
}

.prompt{
  width: 100%;
}

::v-deep .el-upload-dragger{
  width: 332px !important;
}


}




.submitWorkOrder {
  width: 100%;
  min-height: 360px;
  background: #fff;
  background-image: url(../../assets/img/miningAccount/top.png);
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: 30% -15%;
  padding-top: 60px;
}
.WorkOrder {
  width: 70%;
  margin: 0 auto;
  // background: #fff;
  padding: 50px 88px;
  border-radius: 8px;
  transition: all 0.2s linear;
 
}
// .WorkOrder:hover{
//     box-shadow: 3px 3px 10px 4px #d2c3e9;
// }
.elBtn{
    background: #661FFB;
    color: #fff;
    border-radius: 20px;
}
h3{
    margin-bottom: 30px;
}
</style>