前端下单页面改成模范网站样式 包括颜色

dcc

2024-05-15 aea10489d04cf6385675dff3d8f3d765fba25227

 src/components/perpetual-open/index.vue

@@ -22,9 +22,6 @@
          </div>
        </div>
      </div>
      <div>
        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" />
      </div>
    </div>
    <div class="pt-30 pb-20">
      <div class="flex">
@@ -57,22 +54,22 @@
          <contract-futrue v-if="selectIndex == 2" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
          <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            v-if="selectIndex == 1">
            <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
            <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-center rounded-lg"
              :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
            <span class="ml-20">USDT</span>
<!--            <span class="ml-20">USDT</span>-->
          </div>
        <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
          v-if="selectIndex == 1">
          <input :placeholder="selectIndex == 1 ? $t('请输入止盈金额'): ''" class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
             v-model="form.stop_price_profit" />
          <span class="font-22 font-400 textColor">{{ $t("止盈") }}</span>
        </div>
        <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
          v-if="selectIndex == 1">
          <input :placeholder="selectIndex == 1 ? $t('请输入止损金额'): ''" class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"
            v-model="form.stop_price_loss" />
          <span class="font-22 font-400 textColor">{{ $t("止损") }}</span>
        </div>
<!--        <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"-->
<!--          v-if="selectIndex == 1">-->
<!--          <input :placeholder="selectIndex == 1 ? $t('请输入止盈金额'): ''" class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"-->
<!--             v-model="form.stop_price_profit" />-->
<!--          <span class="font-22 font-400 textColor">{{ $t("止盈") }}</span>-->
<!--        </div>-->
<!--        <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"-->
<!--          v-if="selectIndex == 1">-->
<!--          <input :placeholder="selectIndex == 1 ? $t('请输入止损金额'): ''" class="inputBackground  pl-20 h-76 border-none text-left rounded-lg"-->
<!--            v-model="form.stop_price_loss" />-->
<!--          <span class="font-22 font-400 textColor">{{ $t("止损") }}</span>-->
<!--        </div>-->
          <div class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg">
            <div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height: 100%"
              @click="onReduce">
@@ -136,24 +133,6 @@
                (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate | nan }} USDT</div>
            </div>
          </template>
          <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
            <div>{{ $t("可用USDT") }}</div>
            <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
          </div>
          <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
            <div>{{ $t("手续费") }}</div>
            <div class="textColor">
              {{
                (
                  form.amount *
                  (initFutrue && initFutrue.para
                    ? initData.para[paraIndex].unit_fee
                    : "")
                ).toFixed(2) | nan
              }}
              USDT
            </div>
          </div>
          <template v-if="userInfo.token">
            <template v-if="selectIndex == 1">
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" v-if="currentType == 'long'"
@@ -198,7 +177,25 @@
              </div>
            </template>
          </template>
          <div v-else class="w-full mt-120">
          <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
            <div>{{ $t("可用USDT") }}</div>
            <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
          </div>
          <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
            <div>{{ $t("手续费") }}</div>
            <div class="textColor">
              {{
                (
                    form.amount *
                    (initFutrue && initFutrue.para
                        ? initData.para[paraIndex].unit_fee
                        : "")
                ).toFixed(2) | nan
              }}
              USDT
            </div>
          </div>
          <div v-else class="w-full mt-120" v-if="!$store.state.user.userInfo.token">
            <div class="textColor">
              <p>{{ $t("套期保值，风险对冲") }}</p>
              <p class="pt-8">{{ $t("登陆后继续") }}</p>
@@ -892,7 +889,7 @@

<style lang="scss" scoped>
.perpetual-open {
  font-size: 26px;
  font-size: 2rem;
}

.options {