style

lxf

2025-07-05 8c51de06d839339f428ca0691099fe60740765cf

 src/components/Transform/perpetual-open/index.vue

@@ -21,7 +21,7 @@
      </div>
      <div class="pt-30 pb-20">
        <div class="flex">
          <div class="w-440 flex flex-col" :style="selectIndex==2 ? 'width:100%' : ''">
          <div class="w-440 flex flex-col">
            <template v-if="selectIndex == 1">
              <div class="flex items-center h-66 rounded-lg text-grey">
                <p class="font-28 flex-1 flex items-center justify-center h-66 "
@@ -48,28 +48,28 @@
            <contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" class="mb-20"
              :initFutrue="initFutrue" @paraId="onParaId" />
            <div class="h-76 lh-76 greyBg mb-30 flex pr-20 justify-center rounded-lg textColor" v-if="selectIndex == 1">
              <input placeholder="" class=" w-full pl-20  h-76 border-none text-left rounded-lg"
              <input placeholder="" class="greyBg w-full pl-20  h-76 border-none text-left rounded-lg"
                :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
              <span class="ml-20">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
            </div>

            <div class="w-440 flex items-center  h-76 lh-76 rounded-lg" v-if="initFutrue" >
            <div class="w-440 flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;" v-if="initFutrue" >
              <div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
                class="w-80 flex items-center justify-center" style="height:100%;" @click="onReduce">
                <img src="../../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
              </div>
              <input v-if="selectIndex == 1" :placeholder="$t('张数')" class="border-none  text-center textColor"
              <input v-if="selectIndex == 1" :placeholder="$t('张数')" class="border-none greyBg text-center textColor"
                style="width: 156px;" v-model="form.amount" type="number" @input="onInput" />
              <input v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'"
                :placeholder="($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
                class="border-none  text-center ipt_min" style="width: 156px;background-color: #f0f0f0;" v-model="form.amount" type="number"
                class="border-none greyBg text-center textColor" style="width: 156px;background-color:#f5f5f5;" v-model="form.amount" type="number"
                @input="onInput" />
              <div class="w-80 flex items-center justify-center" style="height:100%;">
              <div class="w-80 flex items-center justify-center" style="height:100%;background-color:#f5f5f5;">
                <template v-if="selectIndex == 1">
                  <img @click="onAdd" src="../../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
                </template>
                <template v-else>
                  <span class="text-grey">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
                  <span class="textColor">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
                </template>
              </div>
            </div>
@@ -197,7 +197,7 @@
                @click="$router.push('/login')">{{ $t('logIn') }}</div>
            </div>
          </div>
          <div class="ml-30" v-if="!selectIndex==2"> 
          <div class="ml-30">
            <div class="w-290 flex justify-between text-grey font-22">
              <div>
                <div>{{ $t("价格") }}</div>
@@ -812,7 +812,9 @@
        if (this.selectIndex / 1 === 1) {
          this.$refs.sliderRef.emptyValue()
        }
        this.$emit('ordered', emitFunc)
        if (this.$emit) {
          // this.$emit('ordered', emitFunc)
        }
        _getBalance().then(data => { // 刷新余额
          this.$store.commit('user/SET_USERINFO', { balance: data.money })
        })
@@ -965,9 +967,11 @@
    right: 0;
    top: 90px;
    width: 100%;
    background-color: $grey_bg;
    background-color: #f5f5f5;
    box-shadow: 0px 0px 0.1875rem 0.1875rem #f5f5f5;
    // background-color: $grey_bg;
    text-align: center;
    box-shadow: 0px 0px 3px 3px $grey_bg;
    // box-shadow: 0px 0px 3px 3px $grey_bg;
    border-radius: 4px;
    color: $text-color;
    z-index: 10;
@@ -1044,21 +1048,22 @@
  justify-content: flex-end;
  // padding-right: 40px;
  align-items: center;
s

  .select-box {
    width: 220px;

    background: #1E1E1E;
    background: #f5f5f5;

    margin-right: 20px;
  }
}

.diviLine{
  background-color: #f5f5f5;
}
.textColor2, .textColor{
  color: #fff;
}
.deep-div {
  min-height: 370px;
}

#cryptos .ipt_min::placeholder {
  color: #868C9A;
}
</style>