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

dcc

2024-05-15 9d1fadaf0e2abf8e04446580d8baadf7717ce0d1

 src/components/perpetual-order/index.vue

@@ -3,22 +3,22 @@
    <div>
        <div class="items-center mt-18">
            <div class="flex justify-between border-b-color">
                <div class="flex pb-10">
                <div class="flex pb-10" style="width: 100%;height: 2rem;">
                    <template v-if="topIndex / 1 === 1">
                        <!-- <div class="w-280 flex flex-col items-center textColor1" @click="tabClick('1')"  :class="type=='1'?'active-line':''">{{ $t('当前委托') }}</div>
                        <div class="w-280 flex flex-col items-center ml-30 textColor1" @click="tabClick('2')" :class="type=='2'?'active-line':''">{{ $t('持有仓位') }}</div> -->
                        <div class="px-10  py-10 flex  items-center text-grey" @click="tabClick('1')"
                        <div style="width: 50%;"  class="px-10  py-10 flex justify-center  items-center text-grey" @click="tabClick('1')"
                            :class="type == '1' ? 'active-line' : ''">{{ $t('持有仓位') }}<span v-if="type == '1'">({{
                                orderHold.length }})</span></div>
                        <div class="px-10  ml-50  py-10 flex  items-center text-grey" @click="tabClick('2')"
                        <div style="width: 50%;" class="px-10  ml-50  py-10 flex justify-center items-center text-grey" @click="tabClick('2')"
                            :class="type == '2' ? 'active-line' : ''">{{ $t('当前委托') }}</div>
                    </template>
                    <template v-else>
                        <div class="px-10  py-10 flex  items-center text-grey" @click="tabClick('3')"
                    <template  v-else>
                        <div style="width: 50%;" class="px-10  py-10 flex justify-center items-center text-grey" @click="tabClick('3')"
                            :class="type == '3' ? 'active-line' : ''">{{ $t('持有仓位') }}<span v-if="type == '2'">({{
                                orderCur.length
                            }})111</span></div>
                        <div class="px-10  ml-50  py-10 flex  items-center text-grey" @click="tabClick('4')"
                        <div style="width: 50%;" class="px-10  ml-50  py-10 flex justify-center items-center text-grey" @click="tabClick('4')"
                            :class="type == '4' ? 'active-line' : ''">{{ $t('历史仓位') }}</div>
                    </template>
                </div>
@@ -174,10 +174,22 @@
.active-line {
    position: relative;
    // padding: 15px 0;
    color: #fff;
    color: #000;

   &::after{
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     right: 0;
     top: 4rem;
     width: 18.75rem;
     height: .5rem;
     background-color: #2c78f8;
   }

    @include themify() {
        background-color: themed("color_main");
        //background-color: themed("color_main");
    }
}