桌面应用名称颜色恢复

hanbaoshan

2020-09-24 ba2dff93d5a73e0824d1da91ea01571e60e2ff2a

 src/pages/ai/index/App.vue

@@ -25,16 +25,21 @@
                  <div class="flex-list">

                    <div class="wrap-box" v-for="item in ungradeList" :key="item.id">

                      <div class="list-choose-item-left">

                        <div class="mask">

                        <div class="mask flex-center">

                          <div class="info-onmask">

                            <div>当前版本:{{item.version}}</div>

                            <div>最新版本:{{item.remoteVersion}}</div>

                          </div>

                          <el-button type="primary" class="bot-btn" @click="donwload(item)">升级</el-button>

                        </div>



                        <div class="list-complete-item-handle">

                          <div class="svg-wrap">

                            <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;">

                              <use :xlink:href="`#${item.icon}`" />

                            </svg> -->

                            <img class="baseImg" :src="`data:image/png;base64,${item.iconBlob}`" alt="">

                            <img

                              class="baseImg"

                              :src="`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -46,19 +51,13 @@
                    </div>

                    <div class="wrap-box" v-for="(item) in installedList" :key="item.id">

                      <div class="list-choose-item-left">

                        <div class="mask" v-if="!item.isEdit">

                          <el-button

                            @click="commandAlgLib(item)"

                            type="primary"

                            class="bot-btn"

                          >编辑名称</el-button>

                        </div>

                        <div class="list-complete-item-handle">

                          <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> -->

                        <div class="list-complete-item-handle">        
                          <div class="svg-wrap">

                            <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;">

                              <use :xlink:href="`#${item.icon}`" />

                            </svg>-->

                            <div class="mask flex-center" v-if="!item.isEdit">

                              <div class="info-onmask">

                                <div>当前版本:{{item.version}}</div>

                              </div>

                            </div>                           
                            <img

                              class="baseImg"

                              :src="`data:image/png;base64,${item.iconBlob}`"

@@ -95,12 +94,12 @@
                          <span class="iconfont iconxiazai1"></span>

                        </div>

                        <div class="list-complete-item-handle">

                          <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> -->

                          <div class="svg-wrap">

                            <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;">

                              <use :xlink:href="`#${item.icon}`" />

                            </svg> -->

                            <img class="baseImg" :src="`data:image/png;base64,${item.iconBlob}`" alt="">

                            <img

                              class="baseImg"

                              :src="`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -112,6 +111,38 @@
                    </div>

                  </div>

                  <p class="src-title">应用软件</p>

                  <div class="flex-list">

                    <div class="wrap-box" v-for="(item) in installedApps" :key="item.id">

                        <div class="list-choose-item-left">

                          <div class="list-complete-item-handle">

                            <div class="svg-wrap" v-loading="item.unloadLoading" element-loading-text="卸载中" element-loading-background="rgba(0,0,0,.8)">

                              <div class="mask" v-if="!item.isDefault">

                                <el-button

                                  v-if="!item.isDefault"

                                  @click="unLoad(item)"

                                  type="primary"

                                  class="bot-btn"

                                >卸载</el-button>

                              </div>

                              <img class="baseImg" :src="`${item.iconBlob?'data:image/png;base64,'+item.iconBlob:item.icon}`" alt />

                            </div>

                            <div class="alg-name">

                              <div style="padding:0px 10px 0px 10px;">

                                <span v-if="!item.isEdit">{{ item.name }}</span>

                                <el-input

                                  size="small"

                                  v-model="item.sdk_name"

                                  v-if="item.isEdit"

                                  v-focus

                                  :maxlength="15"

                                  @blur="inputBlur(item)"

                                ></el-input>

                              </div>

                            </div>

                          </div>

                        </div>

                    </div>

                  </div>

                </div>

              </el-tab-pane>



@@ -137,25 +168,73 @@
              <el-tab-pane label="应用中心" name="algorithmMall" v-show="activeName==='algorithmMall'">

                <div class="tab-content">

                  <p class="src-title">算法软件</p>

                  <div class="store-list">

                    <div class="wrap-box">

                      <div class="inner">

                        <div class="mask" @click="actDrawerShow=true">

                          <svg class="icon" aria-hidden="true" style="font-size:2rem;">

                            <use xlink:href="#iconyunxiazai" />

                          </svg>

                  <div class="store-list flex-list">

                    <div class="wrap-box" v-for="item in unActivedSDKList" :key="item.id">

                      <div class="list-choose-item-left">

                        <div class="list-complete-item-handle">

                          <div class="alg-icon svg-wrap">

                            <div class="mask" @click="actSdk(item.id)">

                              <span

                                class="iconfont iconyunxiazai"

                                style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%"

                              ></span>

                            </div>

                            <img

                              class="baseImg"

                              :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                              alt

                            />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

                              <span v-if="!item.isEdit">{{ item.sdk_name }}</span>

                              <el-input

                                size="small"

                                v-model="item.sdk_name"

                                v-if="item.isEdit"

                                v-focus

                                :maxlength="15"

                                @blur="inputBlur(item)"

                              ></el-input>

                            </div>

                          </div>

                        </div>

                        <div class="alg-icon">

                          <svg class="icon" aria-hidden="true" style="font-size:7rem;">

                            <use xlink:href="#iconrenyuanyidong" />

                          </svg>

                        </div>

                        <div class="alg-name">name</div>

                      </div>

                    </div>

                  </div>

                  <p class="src-title">应用软件</p>

                  <div class="app-list"></div>

                  <div class="app-list flex-list">

                    <div class="wrap-box" v-for="item in storeApps" :key="item.id">

                      <div class="list-choose-item-left">

                        <div class="list-complete-item-handle">

                          <div class="svg-wrap" v-loading="item.installLoading" element-loading-text="安装中" element-loading-background="rgba(0,0,0,.8)">

                            <div class="mask">

                              <el-button type="primary" class="bot-btn" @click="downloadApp(item)">安装</el-button>

                            </div>

                            <img

                              class="baseImg"

                              :src="item.iconBlob? 'data:image/png;base64,'+item.iconBlob:item.icon"

                              alt

                            />

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

                              <span v-if="!item.isEdit">{{ item.name }}</span>

                              <el-input

                                size="small"

                                v-model="item.name"

                                v-if="item.isEdit"

                                v-focus

                                :maxlength="15"

                                @blur="inputBlur(item)"

                              ></el-input>

                            </div>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                  
                </div>

                <el-drawer title="下载" :visible.sync="actDrawerShow" :direction="direction">

                  <div class="drawer-content">

@@ -183,28 +262,28 @@
                      <ul class="desc">

                        <li>

                          <label>激活码:</label>

                          <span>YUAAA-AAAEU-QJQE3-ZRRXD-K9MWR</span>

                          <span>{{activedSdk.activateCode}}</span>

                        </li>

                        <li>

                          <label>产品名称:</label>

                          <span>人员跟踪SDK</span>

                          <span>{{activedSdk.productName}}</span>

                        </li>

                        <li>

                          <label>配置详情:</label>

                          <span>无</span>

                          <span>{{activedSdk.setting}}</span>

                        </li>

                        <li>

                          <label>服务到期日:</label>

                          <span>2021-03-04</span>

                          <span>{{activedSdk.expireTime}}</span>

                        </li>

                        <li>

                          <label>许可证:</label>

                          <span>本设备</span>

                          <span>{{activedSdk.licence}}</span>

                        </li>

                        <li>

                        <!-- <li>

                          <label>设备ID:</label>

                          <span>3342-235f-ret55-fdsg</span>

                        </li>

                        </li>-->

                      </ul>

                      <div class="text-right">

                        <el-button type="primary" @click="checkMyAlgorith">确定</el-button>

@@ -241,6 +320,8 @@
  downloadSdk,

  installSdk

} from "./api";

import { getApps,installApp,removeApp } from "@/api/app";

import { getUnActivedSdk, actPageAlg } from "@/api/app";

import FileUploader from "@/components/subComponents/FileUpload/index";

import TaskManage from "@/Pool/TaskMange";

import VideoManageData from "@/Pool/VideoManageData";

@@ -251,25 +332,26 @@
    FileUploader

  },

  computed: {

    notInstalledList() {

    notInstalledList () {

      return this.TaskMange.list1.filter(sdk => {

        return sdk.installed === false;

      });

    },

    installedList() {

    installedList () {

      return this.TaskMange.list1.filter(sdk => {

        return sdk.installed === true;

      });

    },

    ungradeList() {

    ungradeList () {

      // 升级处理会导致重复的key,需要修改

      return [];

      return this.TaskMange.list1.filter(sdk => {

        return sdk.isUpgrade === true;

      });

    }

    },



  },

  data() {

  data () {

    return {

      TaskMange: new TaskManage,

      VideoManageData: new VideoManageData,

@@ -335,12 +417,26 @@
      sceneSdks: [],

      sceneRuleList: "",

      isInstall: false,

      installPercentage: 0

      installPercentage: 0,

      unActivedSDKList: [],

      actSdkId: '',

      activedSdk: {

        activateCode: '',

        productName: '',

        setting: '',

        expireTime: '',

        licence: '',

        devIds: ''

      },

      // unloadLoading: false,

      // installLoading: false,

      installedApps:[],

      storeApps:[]

    }

  },

  watch: {

    list2: {

      handler(newVal, oldVal) {

      handler (newVal, oldVal) {

        // window.console.log(newVal, oldVal, '监听list2')

        if (newVal !== oldVal) {

          // window.console.log(newVal, '监听list2')

@@ -361,30 +457,125 @@
      }

    }

  },

  mounted() {

  mounted () {

    this.getAllApps();

    this.findAllSdk();

    this.findByType();

    this.getBaseList();

    this.findAll();

    this.getUser();

    this.getUnActivedList();

    // this.TaskMange.findAllSdk();

    // this.TaskMange.findByType();

    this.VideoManageData.init();

  },

  methods: {

    installFormat(percentage) {

    downloadApp(app){

      app.installLoading = true;

      let _this = this;

      installApp(app).then(res=>{

        if(res && res.success){

          setTimeout(()=>{

            app.installLoading = false;

            _this.getAllApps();

            window.parent.postMessage({

              msg: "AppUpdate"

            }, '*')

          },3000);  
        }

      })

    },

    getAllApps(){

      let _this = this;

      _this.installedApps = [];

      _this.storeApps = [];

      getApps().then(res=>{

        if(res && res.success){

          //_this.storeApps = res.data;

          res.data.forEach(item=>{

            if(item.installed){

              let obj = Object.assign({unloadLoading:false},item)

              _this.installedApps.push(obj)

            }else{

              let obj = Object.assign({installLoading:false},item)

              _this.storeApps.push(obj)

            }

          });

          console.log('_this.installedApps',_this.installedApps);

          console.log('_this.storeApps',_this.storeApps);

        }

      })

    },

    //卸载应用

    unLoad(app){

      app.unloadLoading = true;

      let _this = this;

      removeApp({appId:app.id}).then(res=>{

        
        if(res && res.success){

          setTimeout(()=>{

            app.unloadLoading = false;

            _this.getAllApps();

            window.parent.postMessage({

              msg: "AppUpdate"

            }, '*')

          },3000);

        }

      })



    },

    actSdk (id) {

      this.actSdkId = id;

      this.actDrawerShow = true;

      this.actStep = 0;

      this.activeCode = '';

      this.activedSdk = this.newActInfo()

    },

    newActInfo(){

      return {

        activateCode: '',

        productName: '',

        setting: '',

        expireTime: '',

        licence: '',

        devIds: ''

      }

    },

    getUnActivedList () {

      getUnActivedSdk().then(res => {

        if (res.code == 200) {

          this.unActivedSDKList = res.data;

        }

      })



    },

    installFormat (percentage) {

      return percentage === 100 ? '安装成功' : `${percentage}%`;

    },

    actived() {

      //this.activeCode

      this.actStep++

    actived () {

      let _this = this;

      actPageAlg(this.actSdkId, this.activeCode).then(res => {

        if (res.data.isSuccess) {

          _this.activedSdk = res.data.successMsg;

          _this.actStep++;

          _this.getUnActivedList();

          _this.findAllSdk();

        }else{

          _this.$notify({

            type:'error',

            message:res.data.failMsg.failMsg

          });

        }

      }).catch(e => {

        console.log(e)

      })

    },

    getCodeDetail() { },

    checkMyAlgorith() {

    getCodeDetail () { },

    checkMyAlgorith () {

      this.actDrawerShow = false;

      this.activeName = "myAlgorithm";

    },

    onFileUpload(file) {

    onFileUpload (file) {

      //this.patchUpdateStatus = `<span style="color:green">上传成功, 点击升级按钮开始安装</span>`;

      this.patchFile = { ...file };

      this.fileAdded = true;

@@ -435,7 +626,7 @@
        //安装

        installSdk(file).then(res => {

          if (res.success) {

            debugger

            
            this.isInstall = false;

            //this.$refs['progressBar'].style.width = 100%

            //this.installPercentage = 100%

@@ -455,12 +646,12 @@


    },



    onFileAdded(f) {

      debugger;

    onFileAdded (f) {

      ;

      this.patchUpdateStatus = "";

    },

    // 校验输入的是否是数字

    valiNum(value) {

    valiNum (value) {

      if (value) {

        let re = /[^\-?\d.]*$/;

        if (!re.test(value)) {

@@ -477,7 +668,7 @@
      }

    },

    // 左边拖动模块得拖动结束后的触发函数

    endLeft(env) {

    endLeft (env) {

      this.dragging = false;

      let taskId = env.to.id;

      let sdkId = this.TaskMange.list1[env.oldIndex].id;

@@ -518,24 +709,24 @@
      this.addTaskSdk(json);

    },

    // 右边拖动模块开始拖动触发函数

    startRight(env) {

    startRight (env) {

      this.$nextTick(() => {

        this.dragging = true;

      });

      // window.window.console.log(env, "right start");

    },

    // 右边拖动模块拖动结束触发函数

    endRight(env) {

    endRight (env) {

      // window.window.console.log(env, "right end");

    },

    clickSet(data) {

    clickSet (data) {

      if (data.isSetting) {

        data.isSetting = false;

      } else {

        data.isSetting = true;

      }

    },

    clickDel(data, Index) {

    clickDel (data, Index) {

      this.$confirm("提示：删除后，此任务在摄像机中的应用失效，是否删除？", {

        center: true,

        showConfirmButton: true,

@@ -548,7 +739,7 @@
        })

        .catch(err => { });

    },

    clickSetAlgo(row, data) {

    clickSetAlgo (row, data) {

      // window.console.log(row, data, "编辑任务中某一个算法");

      if (row.isShowSetAlgo && data.id === this.TaskMange.currentAlgoId) {

        row.isShowSetAlgo = false;

@@ -614,7 +805,7 @@
        // });

      }

    },

    async getRulesByTaskSdk(taskId, sdkId) {

    async getRulesByTaskSdk (taskId, sdkId) {

      let res = await getRulesByTaskSdk({

        taskId: taskId,

        sdkId: sdkId

@@ -650,10 +841,9 @@
        this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList));

      }

    },

    async findAllSdk() {

    async findAllSdk () {

      let res = await findAllSdk();

      if (res && res.success) {

        // debugger

        this.TaskMange.list1 = res.data.map((i, index) => {

          this.$set(i, "isEdit", false);

          //mock 未安装/待升级

@@ -668,7 +858,7 @@
        });

      }

    },

    addTask() {

    addTask () {

      let obj = {

        id: "",

        name: "任务" + this.TaskMange.list2.length,

@@ -684,7 +874,7 @@
        taskArea.scrollTop = taskArea.scrollHeight;

      });

    },

    async findAll() {

    async findAll () {

      let res = await findAll();

      if (res && res.success) {

        if (res.data && res.data.length !== 0) {

@@ -721,7 +911,7 @@
        }

      }

    },

    clickDelSdk(task, sdk) {

    clickDelSdk (task, sdk) {

      this.$confirm(

        "提示：删除后，此算法在本任务中移除，同时在摄像机中的应用失效，是否删除？",

        {

@@ -737,7 +927,7 @@
        })

        .catch(err => { });

    },

    selectChange(event, type, data) {

    selectChange (event, type, data) {

      if (type === "options1") {

        // window.window.console.log(type, data, "选择下拉框");

        data.options1.map(i => {

@@ -748,7 +938,7 @@
      }

    },

    // 删除任务算法

    async delTaskSdk(task, sdk) {

    async delTaskSdk (task, sdk) {

      let json = {

        taskId: task.id,

        sdkId: sdk.id

@@ -768,7 +958,7 @@
      }

    },

    // 删除任务

    async deleteTask(data, index) {

    async deleteTask (data, index) {

      // window.console.log(data, "deleteTask");

      let res = await deleteTask({ taskId: data.id });

      // this.$toast({

@@ -785,7 +975,7 @@
      }

    },

    // 更新任务状态

    async updateTaskStatus(data) {

    async updateTaskStatus (data) {

      // window.console.log(data, '更新任务状态')

      let json = {

        taskId: data.id,

@@ -803,7 +993,7 @@
      });

    },

    // 更新任务名称

    async updateTaskName(data) {

    async updateTaskName (data) {

      let json = {

        taskId: data.id,

        taskName: data.name

@@ -823,7 +1013,7 @@
      }

    },

    // 获取底库数据

    async getBaseList() {

    async getBaseList () {

      // let res = await getTagList();

      // if (res && res.success) {

      //   let filter = res.data.filter(i => {

@@ -852,7 +1042,7 @@
      ];

    },

    // 获取算法参数

    async getSdkArgs(data) {

    async getSdkArgs (data) {

      let res = await getSdkArgs({

        sdkId: data.id,

        scope: "TASKRULE"

@@ -874,7 +1064,7 @@
      }

    },

    // 查询字典

    async findByType() {

    async findByType () {

      let res = await findByType();

      if (res && res.success) {

        let list = res.data.RULECOMPUTEBETWEEN.map(i => {

@@ -887,17 +1077,17 @@
      }

    },

    // 算法配置，新建

    add() {

    add () {

      this.TaskMange.argsList.push(

        JSON.parse(JSON.stringify(this.TaskMange.baseObject))

      );

    },

    // 算法配置 删除

    delRule(index) {

    delRule (index) {

      this.TaskMange.argsList.splice(index, 1);

    },

    // 算法参数保存

    async save() {

    async save () {

      let list = this.TaskMange.argsList.map(i => {

        let obj = {};

        obj.id = i.id;

@@ -930,7 +1120,7 @@
        }

      }

    },

    getDefault() {

    getDefault () {

      this.deleteTaskSdkRule(

        this.TaskMange.currentTaskId,

        this.TaskMange.currentAlgoId

@@ -941,7 +1131,7 @@
        );

      });

    },

    async deleteTaskSdkRule(taskId, sdkId) {

    async deleteTaskSdkRule (taskId, sdkId) {

      let json = {

        taskId: taskId,

        sdkId: sdkId

@@ -961,7 +1151,7 @@
      }

    },

    // 给任务添加算法

    async addTaskSdk(data) {

    async addTaskSdk (data) {

      let res = await addTaskSdk(data);

      if (res && res.success) {

        // window.console.log(res, 'res')

@@ -969,7 +1159,7 @@
      }

    },

    // 新添加任务

    async addTaskAsync(name) {

    async addTaskAsync (name) {

      let res = await addTask({ taskname: name });

      // this.$toast({

      //   type: res.success ? "success" : "error",

@@ -985,7 +1175,7 @@
        this.findAll();

      }

    },

    cancle(row) {

    cancle (row) {

      if (row.isShowSetAlgo) {

        row.isShowSetAlgo = false;

      }

@@ -995,12 +1185,12 @@
        this.$set(i, "isSelect", false);

      });

    },

    cancleTask(row) {

    cancleTask (row) {

      if (row.isSetting) {

        row.isSetting = false;

      }

    },

    commandAlgo(command, row, item) {

    commandAlgo (command, row, item) {

      if (command === 1) {

        // console.log('设置算法')

        this.clickSetAlgo(row, item);

@@ -1010,13 +1200,13 @@
        this.clickDelSdk(row, item);

      }

    },

    commandTask(command, row) {

    commandTask (command, row) {

      if (command === 1) {

        //编辑任务

        this.clickSet(row);

      }

    },

    getUser() {

    getUser () {

      // console.log("登录用户",JSON.parse(sessionStorage.getItem("userInfo")).username)

      if (

        sessionStorage.getItem("userInfo") &&

@@ -1029,7 +1219,7 @@
        this.isSuperUser = false;

      }

    },

    donwload(item) {

    donwload (item) {

      this.downloading = true;

      this.downloadItem = item.id;



@@ -1053,15 +1243,15 @@
          this.downloadItem = "";

        });

    },

    commandAlgLib(item) {

    commandAlgLib (item) {

      this.$set(item, "isEdit", true);

    },

    inputBlur(item) {

    inputBlur (item) {

      // console.log(item, '修改名称')

      this.$set(item, "isEdit", false);

    },

    
    cleanTemplateForm() {



    cleanTemplateForm () {

      this.appSceneForm.name = "";

      this.appSceneForm.desc = "";

      this.appSceneForm.rules = "";

@@ -1069,10 +1259,10 @@


      this.$refs.ruleEditor.cleanRule();

    },

    handleTabClick() {

     
    handleTabClick () {



    },

    handleCreateScene() {

    handleCreateScene () {

      this.sceneDialogVisible = true;

      this.dialogTitle = '创建场景模板';



@@ -1085,10 +1275,10 @@
        this.cleanTemplateForm();

      });

    },

    handleDialogClose() {

    handleDialogClose () {

      this.sceneDialogVisible = false;

    },

    handleEditScene(item) {

    handleEditScene (item) {

      this.appSceneForm.name = item.name;

      this.appSceneForm.desc = item.desc;



@@ -1097,8 +1287,8 @@
      this.sceneDialogVisible = true;

      this.dialogTitle = '编辑场景模板';

    },

   
    




  }

};

</script>

@@ -1150,7 +1340,25 @@
  color: #606266;

  cursor: pointer;

}



.el-loading-mask .el-loading-spinner{

  top: 40px!important;

}

.el-loading-mask .el-loading-spinner svg{

  transform: none!important;

  top: 20px!important;

  left: 40%!important;

}

.el-loading-mask .el-loading-spinner p.el-loading-text{

  display: block!important;

  text-align: center!important;

  bottom: 10px!important;

  top: 80px!important;

  right: 0 !important;

  color: #78adf7;

}

.el-loading-mask .el-loading-spinner .path{

  stroke: #78adf7;

}

.installInfo {

  text-indent: 2em;

  font-size: 14px;

@@ -1160,8 +1368,9 @@
    color: #666;

  }

}

.src-title{

  color: #333;

.src-title {

  //color: #bfbfbf;

  color: #bbcee8;

  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';

  font-weight: 650;

  font-style: normal;

@@ -1187,7 +1396,7 @@
      position: absolute;

      top: 50%;

      left: 50%;

      background: url("/images/algo/green.gif");

      background: url('/images/algo/green.gif');

      overflow: hidden;

      transform: translate(-50%, -50%);

      .inner-bar {

@@ -1242,7 +1451,15 @@
      height: 100%;

      box-sizing: border-box;

      // float: left;



      .el-drawer__header {

        border-bottom: 2px solid #eee;

        padding-bottom: 10px;

        font-size: 16px;

        margin-bottom: 0px;

        span {

          outline: none !important;

        }

      }

      .action-bar {

        margin-bottom: 30px;

        .el-input {

@@ -1250,44 +1467,23 @@
        }

      }

      .task-list {

        background: #fff;

        background: #fdfdfd;

        padding: 20px;

        box-sizing: border-box;

        


        .flex-list {

          display: flex;

          flex-direction: row;

          flex-wrap: wrap;

          // justify-content: space-around;

          // align-content: space-around;

          // &:after {

          //   content: "";

          //   flex: auto;

          // }

          .wrap-box {

            width: 16.66%;

          }

          .list-choose-item-left {

            // width: 220px;

            // height: 214px;

            width: 80%;

            height: auto;

            margin: auto;

            margin-bottom: 30px;

            // @media screen and(min-width: 1895px) {

            //   //margin: 20px 25px 20px 20px;

            //   width: 230px;

            //   height: 224px;

            // }

            // @media screen and(min-width: 1695px) and(max-width:1895px ) {

            //   margin: 20px 10px 20px 15px;

            // }

            // @media screen and(min-width: 1460px) and(max-width: 1695px) {

            //   margin: 20px 25px 20px 20px;

            // }

            // @media screen and(max-width: 1460px) {

            //   margin: 20px 15px 20px 10px;

            // }

            max-width: 200px;

          }

        }

      }

@@ -1450,12 +1646,19 @@
          }

        }

      }

      .store-list {

      .store-list,.app-list {

        display: flex;

        flex-wrap: wrap;

        .wrap-box {

          width: 16.6%;

          margin-bottom: 30px;

          .list-choose-item-left {

            width: 80%;

            height: auto;

            margin: auto;

            margin-bottom: 30px;

            max-width: 200px;

          }

          .inner {

            width: 80%;

            box-sizing: border-box;

@@ -1514,16 +1717,16 @@
        }

      }

      .drawer-content {

        font-family: "PingFangSC-Regular";

        font-family: 'PingFangSC-Regular';

        .el-step__title.is-process {

          border-color: #3d68e1 !important;

          color: #3d68e1 !important;

          font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif;

          font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif;

        }

        .el-step__head.is-process {

          border-color: #3d68e1 !important;

          color: #3d68e1 !important;

          font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif;

          font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif;

        }

        .el-input {

          width: 100%;

@@ -1560,6 +1763,7 @@
        }

        .text-right {

          padding-right: 30px;

          text-align: right;

          .tip {

            color: #999;

            line-height: 38px;

@@ -1596,7 +1800,9 @@
      z-index: 1;

      border-radius: 3px;

      display: none;



      .info-onmask{

        color: #8ecaff;

      }

      i {

        color: #fff;

        position: relative;

@@ -1660,28 +1866,9 @@
      cursor: pointer;

      position: relative;

      font-size: 14px;

      // display: inline-block;

      // @media screen and(min-width: 1895px) {

      //   //margin: 20px 25px 20px 20px;

      //   margin: 20px 30px 20px 20px;

      // }

      // @media screen and(min-width: 1695px) and(max-width:1895px ) {

      //   margin: 20px 10px 20px 15px;

      // }

      // @media screen and(min-width: 1460px) and(max-width: 1695px) {

      //   margin: 20px 25px 20px 20px;

      // }

      // @media screen and(max-width: 1460px) {

      //   margin: 20px 15px 20px 10px;

      // }

      // width: 126px;

      // height: 120px;

      // width: 220px;

      // height: 214px;



      transition: all 1s;

      background: #ffffff;

      border: 1px solid #e2e2e2;

      box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);

      border-radius: 4px;

      p {

        display: none;

@@ -1701,10 +1888,16 @@
      .mask {

        display: flex;

        align-items: flex-end;

        top: 0;

        .bot-btn {

          flex: 1;

        }

        &.flex-center{

          align-items: center;

          justify-content: center;

        }

      }

      
    }

    .list-choose-item-left-uninstal {

      color: darkgray;

@@ -1816,11 +2009,12 @@
      color: #222222;

    }

    .alg-name {

      margin-top: 12px;

      //margin-top: 12px;

      line-height: 36px;

      font-family: PingFangSC-Regular;

      font-size: 15px;

      color: #222222;

      font-size: 14px;

      letter-spacing: 0.05em;

      color: #3e4664;

      // background-color: #ecf5ff;

      .el-input {

        position: relative;

@@ -1852,13 +2046,16 @@
    }

    .list-complete-item-handle {

      height: 100%;

      padding-bottom: 10px;

      //padding-bottom: 10px;

      text-align: center;

      .svg-wrap {

        width: 80%;

        //width: 80%;

        width: 100%;

        margin: auto;

        padding-top: 80%;

        padding-top: 100%;

        position: relative;

        box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);

        svg {

          position: absolute;

          top: 50%;

@@ -1866,11 +2063,13 @@
          transform: translate(-50%, -50%);

        }

        .baseImg {

          width: 60%;

          width: 56%;

          position: absolute;

          top: 50%;

          left: 50%;

          transform: translate(-50%, -50%);

          max-width: 106px;

          max-height: 106px;

        }

      }

    }