OpenI
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: 82630d5a68
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '82630d5a68'
${ noResults }
aiforge/web_src/vuepages/pages/notebook/debug/index.vue

703 lines
26 kB
Raw Blame History 

  1. <template>

  2.   <div>

  3.     <el-dialog

  4.       :title="$t('notebook.createNewNotebook')"

  5.       :visible.sync="dialogVisible"

  6.       width="50%"

  7.       :close-on-click-modal="false"

  8.       @closed="handleClose"

  9.     >

  10.       <div class="wrapper" v-loading="loading" element-loading-spinner="el-icon-loading">

  11.         <div style="text-align: center;padding-bottom: 12px;">

  12.           <span class="text-tip">{{$t('notebook.tips')}}</span>

  13.         </div>

  14.         <div v-show="alertCb" class="ui message alert-info"> 

  15.             <div style="display: flex;align-items: center;">

  16.                 <i class="ri-information-line" style="font-size: 35px;color:  rgba(242, 113, 28, 1);;"></i>

  17.                 <div style="text-align: left;margin-left: 1rem;">

  18.                     <div style="font-weight: 600;line-height: 2;">{{$t('notebook.sameTaskTips1')}} <span style="color:rgba(242, 113, 28, 1);">{{$t('notebook.sameTaskTips2')}}</span> {{$t('notebook.sameTaskTips3')}}</div>

  19.                     <div style="color:#939393">{{$t('notebook.sameTaskTips4')}} “<a href="/cloudbrains" target="_blank">{{$t('notebook.sameTaskTips5')}} &gt; {{$t('notebook.sameTaskTips6')}}</a>” {{$t('notebook.sameTaskTips7')}}</div>

  20.                 </div>

  21.             </div>

  22.         </div>

  23.         <div

  24.           class="three-resource-type"

  25.           :class="{ active: selectIndex == 0 }"

  26.           @click="selectResource(0)"

  27.         >

  28.           <div class="resource-child-node">

  29.             <div class="resource-type-icon background-C">

  30.               <span class="text">C</span>

  31.             </div>

  32.             <div class="resource-type-detail">

  33.               <div class="detail-title"><span>{{$t('notebook.cpuEnv')}}</span></div>

  34.               <div class="detail-spec">

  35.                 <span>{{cpuSpec}}</span>

  36.               </div>

  37.               <div class="detail-spec">

  38.                 <span>{{$t('image')}}：{{notebookInfo.imageCpuDescription}}</span>

  39.               </div>

  40.             </div>

  41.             <div class="resource-select">

  42.               <i v-if="selectIndex===0" :class="{'slide-in-bottom': !slideActive && !initSelect }" class="ri-checkbox-circle-line green"></i>

  43.               <i

  44.                 class="ri-checkbox-blank-circle-line gray"

  45.                 :class="{'fade-out':selectIndex===0}"

  46.               ></i>

  47.             </div>

  48.           </div>

  49.         </div>

  50.         

  51.         <div

  52.           class="three-resource-type"

  53.           :class="{ active: selectIndex == 2 }"

  54.           @click="selectResource(2)"

  55.         >

  56.           <div class="resource-child-node">

  57.             <div class="resource-type-icon background-N">

  58.               <span class="text">N</span>

  59.             </div>

  60.             <div class="resource-type-detail">

  61.               <div class="detail-title"><span>{{$t('notebook.npuEnv')}}</span></div>

  62.               <div class="detail-spec">

  63.                 <span>{{npuSpec}}</span>

  64.               </div>

  65.               <div class="detail-spec">

  66.                 <span>{{$t('image')}}：{{notebookInfo.imageNpuDescription}}</span>

  67.               </div>

  68.             </div>

  69.             <div class="resource-select">

  70.                 <i v-if="selectIndex===2" :class="[slideActive && !initSelect ?'slide-in-top':'slide-in-bottom']" class="ri-checkbox-circle-line green"></i>

  71.               <i

  72.                 class="ri-checkbox-blank-circle-line gray"

  73.                 :class="{'fade-out':selectIndex===2}"

  74.               ></i>

  75.             </div>

  76.           </div>

  77.         </div>

  78.         <div

  79.           class="three-resource-type"

  80.           :class="{ active: selectIndex == 1 }"

  81.           @click="selectResource(1)"

  82.         >

  83.           <div class="resource-child-node">

  84.             <div class="resource-type-icon background-G">

  85.               <span class="text">G</span>

  86.             </div>

  87.             <div class="resource-type-detail">

  88.               <div class="detail-title"><span>{{$t('notebook.gpuEnv')}}</span></div>

  89.               <div class="detail-spec">

  90.                 <span>{{gpuSpec}}</span>

  91.               </div>

  92.               <div class="detail-spec">

  93.                 <span>{{$t('image')}}：{{notebookInfo.imageGpuDescription}}</span>

  94.               </div>

  95.             </div>

  96.             <div class="resource-select">

  97.                 <i v-if="selectIndex===1 && !initSelect" :class="{'slide-in-top': slideActive && !initSelect}" class="ri-checkbox-circle-line green"></i>

  98.                 <i v-if="selectIndex===1 && initSelect"   class="ri-checkbox-circle-line green"></i>

  99.               <i

  100.                 class="ri-checkbox-blank-circle-line gray"

  101.                 :class="{'fade-out':selectIndex===1}"

  102.               ></i>

  103.             </div>

  104.           </div>

  105.         </div>

  106.         <div class="resource-footer">

  107.             <div class="resource-operate" v-if="selectIndex==0">

  108.                 <div v-if="btnStatus[0]===0">

  109.                     <button  class="ui green small button" @click="createTask(0)"></i>{{$t('notebook.newTask')}}</button>

  110.                     <span v-if="notebookInfo.waitCountGpu==0" class="text">{{$t('notebook.noQuene')}}</span>

  111.                     <span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountGpu + 1}}</span> {{$t('notebook.queneTips2')}}</span>

  112.                 </div>

  113.                 <div v-else-if="btnStatus[0]===1">

  114.                     <button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.newTask')}}</button>

  115.                     <span class="text">{{$t('notebook.watiResource')}}</span>

  116.                 </div>

  117.                 

  118.                 <div v-else-if="btnStatus[0]===2">

  119.                     <button class="ui small button" style="background-color: #1684fc;">

  120.                         <a style="color:#fff" :href="deubgUrlGpu" target="_blank">{{$t('notebook.debug')}}</a>

  121.                     </button>

  122.                     <button class="ui small button" @click="stopDebug(0)">{{$t('notebook.stop')}}</button>

  123.                     <span class="text">{{$t('notebook.notebookRunning')}}</span>

  124.                 </div>

  125.                 <div v-else>

  126.                     <button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.stopping')}}</button>

  127.                 </div>

  128.               </div>

  129.           

  130.           <div class="resource-operate" v-if="selectIndex==2">

  131.             <div v-if="btnStatus[2]===0">

  132.                 <button  class="ui green small button" @click="createTask(2)"></i>{{$t('notebook.newTask')}}</button>

  133.                 <span v-if="notebookInfo.waitCountNpu==0" class="text">{{$t('notebook.noQuene')}}</span>

  134.                 <span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountNpu + 1}}</span> {{$t('notebook.queneTips2')}}</span>

  135.             </div>

  136.             <div v-else-if="btnStatus[2]===1">

  137.                 <button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.newTask')}}</button>

  138.                 <span class="text">{{$t('notebook.watiResource')}}</span>

  139.             </div>

  140.             

  141.             <div v-else-if="btnStatus[2]===2">

  142.                 <button class="ui small button" style="background-color: #1684fc;">

  143.                     <a style="color:#fff" :href="deubgUrlNpu" target="_blank">{{$t('notebook.debug')}}</a>

  144.                 </button>

  145.                 <button class="ui small button" @click="stopDebug(2)">{{$t('notebook.stop')}}</button>

  146.                 <span class="text">{{$t('notebook.notebookRunning')}}</span>

  147.             </div>

  148.             <div v-else>

  149.                 <button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.stopping')}}</button>

  150.             </div>

  151.           </div>

  152.           <div class="resource-operate" v-if="selectIndex==1">

  153.             <div v-if="btnStatus[1]===0">

  154.                 <button  class="ui green small button" @click="createTask(1)"></i>{{$t('notebook.newTask')}}</button>

  155.                 <span v-if="notebookInfo.waitCountGpu==0" class="text">{{$t('notebook.noQuene')}}</span>

  156.                 <span v-else class="text">{{$t('notebook.queneTips1')}} <span style="color: red;">{{notebookInfo.waitCountGpu + 1}}</span> {{$t('notebook.queneTips2')}}</span>

  157.             </div>

  158.             <div v-else-if="btnStatus[1]===1">

  159.                 <button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.newTask')}}</button>

  160.                 <span class="text">{{$t('notebook.watiResource')}}</span>

  161.             </div>

  162.             

  163.             <div v-else-if="btnStatus[1]===2">

  164.                 <button class="ui small button" style="background-color: #1684fc;">

  165.                     <a style="color:#fff" :href="deubgUrlGpu" target="_blank">{{$t('notebook.debug')}}</a>

  166.                 </button>

  167.                 <button class="ui small button" @click="stopDebug(1)">{{$t('notebook.stop')}}</button>

  168.                 <span class="text">{{$t('notebook.notebookRunning')}}</span>

  169.             </div>

  170.             <div v-else>

  171.                 <button class="ui disabled small button" style="background-color: #888;"><i class="loading spinner icon" style="color: #fff;"></i>{{$t('notebook.stopping')}}</button>

  172.             </div>

  173.           </div>

  174.         </div>

  175.         

  176.       </div>

  177.     </el-dialog>

  178.   </div>

  179. </template>

  180. <script>

  181. import { getFileNotebook,createNotebook,getCb1Notebook,getCb2Notebook,getFileInfoNotebook,stopNotebook } from "~/apis/modules/notobook";

  182. import { Message } from "element-ui";

  183. let timerCb1,timerCb2,timerCb3

  184. let {AppSubUrl} = window.config

  185. const finalState = [

  186.         "STOPPED",

  187.         "CREATE_FAILED",

  188.         "UNAVAILABLE",

  189.         "DELETED",

  190.         "RESIZE_FAILED",

  191.         "SUCCEEDED",

  192.         "IMAGE_FAILED",

  193.         "SUBMIT_FAILED",

  194.         "DELETE_FAILED",

  195.         "KILLED",

  196.         "COMPLETED",

  197.         "FAILED",

  198.         "CANCELED",

  199.         "LOST",

  200.         "START_FAILED",

  201.         "SUBMIT_MODEL_FAILED",

  202.         "DEPLOY_SERVICE_FAILED",

  203.         "CHECK_FAILED",

  204.         "STOPPING"

  205.     ];

  206. export default {

  207.   data() {

  208.     return {

  209.       dialogVisible: false,

  210.       selectIndex: 0,

  211.       slideActive:true,

  212.       initSelect:true,

  213.       notebookInfo:{specCpu:{acc_cards_num:0},specGpu:{acc_cards_num:0},specNpu:{acc_cards_num:0}},

  214.       fileInfo:{

  215.         file:'',

  216.         branch_name:'',

  217.         owner_name:'',

  218.         project_name:'',

  219.         sign_name:''

  220.       },

  221.       btnStatus:{0:0,1:0,2:0},

  222.       alertCb:false,

  223.       deubgUrlNpu:'',

  224.       deubgUrlGpu:'',

  225.       deubgUrlNpuStop:'',

  226.       deubgUrlGpuStop:'',

  227.       loading:false,

  228.       activeLoadFirst:true

  229.     };

  230.   },

  231.   methods: {

  232.     handleClose(done) {

  233.       this.initSelect = true

  234.       this.alertCb = false

  235.     },

  236.     selectResource(index) {

  237.         this.getNotebookInfo()

  238.         if(index==this.selectIndex){

  239.             return

  240.         } 

  241.         if(index>this.selectIndex && this.selectIndex!==1){

  242.           this.slideActive = true

  243.         }else if(index<this.selectIndex && index==1){

  244.           this.slideActive = true

  245.         }else{

  246.           this.slideActive = false

  247.         }

  248.       this.selectIndex = index;

  249.       this.initSelect = false

  250.       this.alertCb = false

  251.     },

  252.     getNotebookInfo(){

  253.       if(this.activeLoadFirst){

  254.         this.loading = true

  255.       }

  256.       getFileNotebook().then((res)=>{

  257.           if(res.data.code==0){

  258.               this.notebookInfo = res.data

  259.           }else{

  260.               Message.error(res.data.message)

  261.           }

  262.           this.loading = false

  263.           this.activeLoadFirst = false

  264.       }).catch((err)=>{

  265.           Message.error(err)

  266.           this.loading = false

  267.           this.activeLoadFirst = false

  268.       })

  269.     },

  270.     getCb1NotebookInfo(path,id,index,data){

  271.         getCb1Notebook(path,id).then((res)=>{

  272.             if(res.status===200){

  273.                 if(res.data.JobStatus==="RUNNING"){

  274.                     let fileData = {job_id:id,...data}

  275.                     timerCb3 = setInterval(() => {

  276.                         setTimeout(this.getFileInfoReadyNotebook(fileData,index), 0)

  277.                     }, 5000)

  278.                     clearInterval(timerCb1)

  279.                 }

  280.                 if(finalState.includes(res.data.JobStatus)){

  281.                     this.btnStatus[index] = 0

  282.                     clearInterval(timerCb1)

  283.                 }

  284.             }

  285.         }).catch((err)=>{

  286.           this.btnStatus[index]=0

  287.           clearInterval(timerCb1)

  288.           Message.error(err)

  289.       })

  290.     },

  291.     getCb2NotebookInfo(path,id,data){

  292.         getCb2Notebook(path,id).then((res)=>{

  293.             if(res.status===200){

  294.                 if(res.data.JobStatus==="RUNNING"){ 

  295.                   let fileData = {job_id:id,...data}

  296.                   timerCb3 = setInterval(() => {

  297.                         setTimeout(this.getFileInfoReadyNotebook(fileData,2), 0)

  298.                     }, 5000)

  299.                   clearInterval(timerCb2)

  300.                 }

  301.                 if(finalState.includes(res.data.JobStatus)){

  302.                     this.btnStatus[2] = 0

  303.                     clearInterval(timerCb2)

  304.                 }

  305.             }

  306.         }).catch((err)=>{

  307.           this.btnStatus[index]=0

  308.           clearInterval(timerCb2)

  309.           Message.error(err)

  310.       })

  311.     },

  312.     getFileInfoReadyNotebook(data,index){

  313.       getFileInfoNotebook(data).then((res)=>{

  314.         console.log(res)

  315.         if(res.data.code===0){

  316.           if(index===2){

  317.             this.btnStatus[2]=2

  318.             this.deubgUrlNpu = `${AppSubUrl}/${this.fileInfo.sign_name}/${this.notebookInfo.projectName}/modelarts/notebook/${data.job_id}/debug?file=${this.fileInfo.owner_name}/${this.fileInfo.project_name}/${this.fileInfo.file}`

  319.             this.deubgUrlNpuStop = `${AppSubUrl}/${this.fileInfo.sign_name}/${this.notebookInfo.projectName}/modelarts/notebook/${data.job_id}/stop`

  320.           }else{

  321.             this.btnStatus[index]=2

  322.             this.deubgUrlGpu = `${AppSubUrl}/${this.fileInfo.sign_name}/${this.notebookInfo.projectName}/cloudbrain/${data.job_id}/debug?file=${this.fileInfo.owner_name}/${this.fileInfo.project_name}/${this.fileInfo.file}`

  323.             this.deubgUrlGpuStop = `${AppSubUrl}/${this.fileInfo.sign_name}/${this.notebookInfo.projectName}/cloudbrain/${data.job_id}/stop`

  324.           }

  325.           clearInterval(timerCb3)

  326.         }

  327.       }).catch((err)=>{

  328.           this.btnStatus[index]=0

  329.           clearInterval(timerCb3)

  330.           Message.error(err)

  331.       })

  332.     },

  333.     stopDebug(index){

  334.         this.btnStatus[index]=3

  335.         let url = index===2 ? this.deubgUrlNpuStop :this.deubgUrlGpuStop

  336.         stopNotebook(url).then((res)=>{

  337.             if(res.data.result_code==='0'){

  338.                 this.btnStatus[index]=0

  339.                 Message.success(this.$t("notebook.stopSuccess"))

  340.             }else{

  341.                 this.btnStatus[index]=0

  342.                 Message.error(res.data.error_msg)

  343.             }

  344.         }).catch((err)=>{

  345.             this.btnStatus[index]=0

  346.             Message.error(err)

  347.         })

  348.     },

  349.     createTask(index){

  350.         this.btnStatus[index]=1

  351.         const data = {type:index,...this.fileInfo}

  352.         let repoPath = `repos/${this.fileInfo.owner_name}/${this.fileInfo.project_name}`

  353.         createNotebook(data).then((res)=>{

  354.             if(res.data.code===0 && res.status===200){

  355.                 if(index===2){

  356.                     timerCb2 = setInterval(() => {

  357.                         setTimeout(this.getCb2NotebookInfo(repoPath,res.data.message,data), 0)

  358.                     }, 10000)

  359.                 }else{

  360.                     timerCb1 = setInterval(() => {

  361.                         setTimeout(this.getCb1NotebookInfo(repoPath,res.data.message,index,data), 0)

  362.                     }, 10000)

  363.                 }

  364.                 this.alertCb = false

  365.                 

  366.             }else if(res.data.code==2){

  367.                 this.btnStatus[index]=0

  368.                 this.alertCb = true

  369.             }else{

  370.                 this.btnStatus[index]=0

  371.                 Message.error(res.data.message)

  372.             }

  373.         }).catch((err)=>{

  374.           if(err.response.status===403 && err.response.data.code===1 ){

  375.             location.href=`${AppSubUrl}/authentication/wechat/bind`

  376.           }

  377.           if(err.response.status===401){

  378.             location.href=`${AppSubUrl}/user/login?redirect_to=${encodeURIComponent(location.origin+location.pathname + '?type=login&card='+ this.selectIndex)}`

  379.             return

  380.           }

  381.             this.btnStatus[index]=0

  382.             this.alertCb = false

  383.             Message.error(err)

  384.             

  385.         })

  386.     }

  387.   },

  388.   computed: {

  389.     cpuSpec(){

  390.         let cpu_spec = `${this.$t("notebook.specification")}：GPU: ${this.notebookInfo.specCpu.acc_cards_num}*${this.notebookInfo.specCpu.acc_card_type}, CPU: ${this.notebookInfo.specCpu.cpu_cores}`

  391.         if(this.notebookInfo.specCpu.gpu_mem_gi_b!==0){

  392.           cpu_spec += `, ${this.$t("notebook.graphicMemory")}: ${this.notebookInfo.specCpu.gpu_mem_gi_b}GB`

  393.         }

  394.         if(this.notebookInfo.specCpu.mem_gi_b!==0){

  395.           cpu_spec += `, ${this.$t("notebook.memory")}: ${this.notebookInfo.specCpu.mem_gi_b}GB`

  396.         }

  397.         if(this.notebookInfo.specCpu.share_mem_gi_b!==0){

  398.           cpu_spec += `, ${this.$t("notebook.sharedMemory")}: ${this.notebookInfo.specCpu.share_mem_gi_b}GB`

  399.         }

  400.         return cpu_spec

  401.     },

  402.     npuSpec(){

  403.       let acc_card_type = ''

  404.       if(this.notebookInfo.specNpu.acc_card_type==="ASCEND910"){

  405.          acc_card_type = "Ascend 910"

  406.       }

  407.       let npu_spec = `${this.$t("notebook.specification")}：NPU: ${this.notebookInfo.specNpu.acc_cards_num}*${acc_card_type}, CPU: ${this.notebookInfo.specNpu.cpu_cores}`

  408.         if(this.notebookInfo.specNpu.gpu_mem_gi_b!==0){

  409.           npu_spec += `, ${this.$t("notebook.graphicMemory")}: ${this.notebookInfo.specNpu.gpu_mem_gi_b}GB`

  410.         }

  411.         if(this.notebookInfo.specNpu.mem_gi_b!==0){

  412.           npu_spec += `, ${this.$t("notebook.memory")}: ${this.notebookInfo.specNpu.mem_gi_b}GB`

  413.         }

  414.         if(this.notebookInfo.specNpu.share_mem_gi_b!==0){

  415.           npu_spec += `, ${this.$t("notebook.sharedMemory")}: ${this.notebookInfo.specNpu.share_mem_gi_b}GB`

  416.         }

  417.         return npu_spec

  418.     },

  419.     gpuSpec(){

  420.       let gpu_spec = `${this.$t("notebook.specification")}：GPU: ${this.notebookInfo.specGpu.acc_cards_num}*${this.notebookInfo.specGpu.acc_card_type}, CPU: ${this.notebookInfo.specGpu.cpu_cores}`

  421.         if(this.notebookInfo.specGpu.gpu_mem_gi_b!==0){

  422.           gpu_spec += `, ${this.$t("notebook.graphicMemory")}: ${this.notebookInfo.specGpu.gpu_mem_gi_b}GB`

  423.         }

  424.         if(this.notebookInfo.specGpu.mem_gi_b!==0){

  425.           gpu_spec += `, ${this.$t("notebook.memory")}: ${this.notebookInfo.specGpu.mem_gi_b}GB`

  426.         }

  427.         if(this.notebookInfo.specGpu.share_mem_gi_b!==0){

  428.           gpu_spec += `, ${this.$t("notebook.sharedMemory")}: ${this.notebookInfo.specGpu.share_mem_gi_b}GB`

  429.         }

  430.         return gpu_spec

  431.     }

  432.   },

  433.   beforeDestroy() {

  434.     clearInterval(timerCb1)

  435.     clearInterval(timerCb2)

  436.   },

  437.   mounted() {

  438.     const selfData = document.querySelector('#__vue-self-data')

  439.     this.fileInfo.file = selfData.getAttribute('data-file')

  440.     this.fileInfo.branch_name = selfData.getAttribute('data-branch')

  441.     this.fileInfo.owner_name = selfData.getAttribute('data-owner')

  442.     this.fileInfo.project_name = selfData.getAttribute('data-project')

  443.     this.fileInfo.sign_name = selfData.getAttribute('data-name')

  444.     let that = this;

  445.     if(new URLSearchParams(window.location.search).get("type")==='login'){

  446.       that.getNotebookInfo()

  447.       that.dialogVisible = true;

  448.       that.selectIndex = Number(new URLSearchParams(window.location.search).get("card"))

  449.     }

  450.     document

  451.       .querySelector("#notebook-debug")

  452.       .addEventListener("click", function () {

  453.         that.getNotebookInfo()

  454.         that.dialogVisible = true;

  455.       });

  456.   },

  457. };

  458. </script>

  459. <style scoped lang="less">

  460. /deep/ .el-dialog__header {

  461.   text-align: left;

  462.   height: 45px;

  463.   background: rgb(240, 240, 240);

  464.   border-radius: 5px 5px 0px 0px;

  465.   border-bottom: 1px solid rgb(212, 212, 213);

  466.   padding: 0 15px;

  467.   display: flex;

  468.   align-items: center;

  469.   font-weight: 500;

  470.   font-size: 16px;

  471.   color: rgb(16, 16, 16);

  472.   font-family: Roboto;

  473. 

  474.   .el-dialog__title {

  475.     font-weight: 600;

  476.     font-size: 15px;

  477.     color: rgb(16, 16, 16);

  478.   }

  479. 

  480.   .el-dialog__headerbtn {

  481.     top: 15px;

  482.     right: 15px;

  483.   }

  484. }

  485. 

  486. /deep/ .el-dialog__body {

  487.   padding: 55px 15px 0 15px;

  488. }

  489. .wrapper {

  490.   width: 100%;

  491.   .active {

  492.     background: linear-gradient(

  493.       269.2deg,

  494.       rgba(183, 247, 255, 0.5) 0%,

  495.       rgba(233, 233, 255, 0) 78.67%

  496.     );

  497.     border-radius: 5px 5px 0px 0px;

  498.   }

  499.   .text-tip{

  500.     color: #888;

  501.     font-size: 12px;

  502.   }

  503.   .text-tip::before{

  504.     content: '*';

  505.     color: #f2711c;

  506.   }

  507.   .alert-info{

  508.     width: 70%;

  509.     background-color: rgba(242, 113, 28, 0.05);

  510.     border: 1px solid rgb(242, 113, 28);

  511.     border-radius: 5px;

  512.     margin: 0 auto;

  513.     padding-bottom: 10px;

  514.   }

  515.   & >.three-resource-type:nth-child(2){

  516.     border:none;

  517.   }

  518.   .three-resource-type {

  519.     width: 70%;

  520.     margin: 0 auto;

  521.     display: flex;

  522.     border-top: 1px solid rgba(16, 16, 16, 0.1);

  523.     cursor: pointer;

  524.     .resource-child-node {

  525.       display: flex;

  526.       align-items: center;

  527.       width: 100%;

  528.       height: 115px;

  529.       .resource-type-icon {

  530.         width: 50px;

  531.         height: 50px;

  532.         line-height: 20px;

  533.         border-radius: 25px;

  534.         text-align: center;

  535.         display: flex;

  536.         align-items: center;

  537.         justify-content: center;

  538.         flex-shrink: 0;

  539.         .text {

  540.           font-size: 26px;

  541.           color: rgba(251, 251, 251, 1);

  542.           font-family: ZKXiaoWeiLogo-regular;

  543.         }

  544.       }

  545.       .background-C {

  546.         background: linear-gradient(

  547.           134.2deg,

  548.           rgba(130, 209, 246, 1) 0%,

  549.           rgba(41, 182, 244, 1) 51.94%,

  550.           rgba(0, 137, 205, 1) 102.83%

  551.         );

  552.       }

  553.       .background-N {

  554.         background: linear-gradient(

  555.           151.47deg,

  556.           rgba(123, 50, 178, 1) 20.02%,

  557.           rgba(64, 26, 93, 1) 100%

  558.         );

  559.       }

  560.       .background-G {

  561.         background: linear-gradient(

  562.           -25.25deg,

  563.           rgba(254, 86, 77, 1) 9.3%,

  564.           rgba(251, 155, 54, 1) 38.86%,

  565.           rgba(249, 202, 38, 1) 67.95%

  566.         );

  567.       }

  568.     }

  569.     

  570.     .resource-type-detail {

  571.       margin-left: 23px;

  572.       .detail-title {

  573.         font-family: SourceHanSansSC;

  574.         font-weight: 500;

  575.         font-size: 16px;

  576.         color: rgb(16, 16, 16);

  577.         font-style: normal;

  578.         letter-spacing: 0px;

  579.         line-height: 32px;

  580.         text-decoration: none;

  581.       }

  582.       .detail-spec {

  583.         font-family: SourceHanSansSC;

  584.         font-weight: 400;

  585.         font-size: 14px;

  586.         color: rgba(136, 136, 136, 1);

  587.         font-style: normal;

  588.         letter-spacing: 0px;

  589.         line-height: 24px;

  590.         text-decoration: none;

  591.       }

  592.     }

  593.     .resource-select {

  594.       margin-left: auto;

  595.       margin-right: 20px;

  596.       font-size: 20px;

  597.       height: 100%;

  598.       display: flex;

  599.       align-items: center;

  600.       .green {

  601.         color: green;

  602.       }

  603.       .gray {

  604.         color: rgba(16, 16, 16, 0.1);

  605.       }

  606.     }

  607.   }

  608.   .resource-footer {

  609.     margin-top: 40px;

  610.     border-top: 1px solid rgba(16, 16, 16, 0.1);

  611.     height: 71px;

  612.     display: flex;

  613.     align-items: center;

  614.     .resource-operate {

  615.       display: flex;

  616.       align-items: center;

  617.       .text{

  618.         color: #101010;

  619.         margin-left: 20px;

  620.       }

  621.     }

  622.   }

  623.   .slide-in-top {

  624.     -webkit-animation: slide-in-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

  625.     animation: slide-in-top 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

  626.   }

  627.   .slide-in-bottom {

  628.     -webkit-animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

  629.     animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

  630.   }

  631.   .fade-out {

  632.     -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;

  633.     animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;

  634.     position: absolute

  635.   }

  636.   @-webkit-keyframes slide-in-top {

  637.     0% {

  638.       -webkit-transform: translateY(-50px);

  639.       transform: translateY(-50px);

  640.       opacity: 0;

  641.     }

  642.     100% {

  643.       -webkit-transform: translateY(0);

  644.       transform: translateY(0);

  645.       opacity: 1;

  646.     }

  647.   }

  648.   @keyframes slide-in-top {

  649.     0% {

  650.       -webkit-transform: translateY(-50px);

  651.       transform: translateY(-50px);

  652.       opacity: 0;

  653.     }

  654.     100% {

  655.       -webkit-transform: translateY(0);

  656.       transform: translateY(0);

  657.       opacity: 1;

  658.     }

  659.   }

  660.   @-webkit-keyframes slide-in-bottom {

  661.     0% {

  662.       -webkit-transform: translateY(50px);

  663.       transform: translateY(50px);

  664.       opacity: 0;

  665.     }

  666.     100% {

  667.       -webkit-transform: translateY(0);

  668.       transform: translateY(0);

  669.       opacity: 1;

  670.     }

  671.   }

  672.   @keyframes slide-in-bottom {

  673.     0% {

  674.       -webkit-transform: translateY(50px);

  675.       transform: translateY(50px);

  676.       opacity: 0;

  677.     }

  678.     100% {

  679.       -webkit-transform: translateY(0);

  680.       transform: translateY(0);

  681.       opacity: 1;

  682.     }

  683.   }

  684.   @-webkit-keyframes fade-in {

  685.     0% {

  686.       opacity: 1;

  687.     }

  688.     100% {

  689.       opacity: 0;

  690.     }

  691.   }

  692.   @keyframes fade-in {

  693.     0% {

  694.       opacity: 1;

  695.     }

  696.     100% {

  697.       opacity: 0;

  698.     }

  699.   }

  700.   

  701. }

  702. </style>