应用中心ui改动

heyujie

2021-09-18 44a3abe105e9b9b4d1a7173772fc9d18c9b59529

 src/pages/ai/index/App.vue

@@ -19,15 +19,11 @@
                  @click="pickMenu(name)"

                >

                  {{ name }}

                  <el-badge

                    v-if="index == 3"

                    class="update-badge"

                    :value="updateNum"

                    :hidden="updateNum == 0"

                  ></el-badge>

                  <sup v-if="index == 3 && updateNum != 0">{{ updateNum }}</sup>

                </div>

              </div>

              <div class="nav-box-search">

                <span class="icon iconfont all-scene">&#xe703;</span>

                <el-input

                  placeholder="搜索"

                  v-model="input3"

@@ -37,53 +33,71 @@
                  <el-select

                    v-model="select"

                    slot="append"

                    placeholder="所有场景"

                    placeholder="选择场景"

                    :popper-append-to-body="false"

                  >

                    <el-option label="铁路场景" value="1"></el-option>

                    <el-option label="安全场景" value="2"></el-option>

                    <el-option label="通用场景" value="3"></el-option>

                    <el-option label="校园园区" value="4"></el-option>

                    <el-option label="铁路场景" value="1">

                      <span class="icon iconfont">&#xe713;</span>

                      <span>铁路场景</span>

                    </el-option>

                    <el-option label="安全场景" value="2">

                      <span class="icon iconfont">&#xe702;</span>

                      <span>安全场景</span>

                    </el-option>

                    <el-option label="通用场景" value="3">

                      <span class="icon iconfont">&#xe70d;</span>

                      <span>通用场景</span>

                    </el-option>

                    <el-option label="校园园区" value="4">

                      <span class="icon iconfont">&#xe70e;</span>

                      <span>校园园区</span>

                    </el-option>

                  </el-select>

                </el-input>

              </div>



              <div class="bg-img-wrap">

                <img src="/images/appCenter/app-banner.jpg" alt="" />

                <img src="/images/appCenter/Group-112.png" alt="" />

              </div>

            </div>

            <div class="quick-path" v-if="showQuickPath">

              <div

                class="quick-item"

                v-for="(item, index) in recomandUpdateList"

                :key="index"

                @click="checkDetail(item, 'active')"

              >

                <div class="icon-img">

                  <img

                    v-if="item.iconBlob"

                    :src="

                      item.iconBlob.indexOf(',') > 0

                        ? item.iconBlob

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

                    "

                    alt

                  />

                  <img v-else :src="item.icon" alt />

                </div>

                <div class="desc">

                  <div class="desc-1">{{ item.sdk_name || item.name }}</div>

                  <div class="desc-2">版本 {{ item.version }}</div>

                </div>

                <div class="right-icon">

                  <span class="icon iconfont">&#xe6b0;</span>

              <div class="left-items">

                <div

                  class="quick-item"

                  v-for="(item, index) in recomandUpdateList"

                  :key="index"

                  @click="checkDetail(item, 'inactive')"

                >

                  <div class="icon-img">

                    <span class="icon iconfont" v-if="item.isUpgrade"

                      >&#xe719;</span

                    >

                    <img

                      v-if="item.iconBlob"

                      :src="

                        item.iconBlob.indexOf(',') > 0

                          ? item.iconBlob

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

                      "

                      alt

                    />

                    <img v-else :src="item.icon" alt />

                  </div>

                  <div class="desc">

                    <div class="desc-1">{{ item.sdk_name || item.name }}</div>

                    <div class="desc-2">版本 {{ item.version }}</div>

                  </div>

                  <div class="right-icon">

                    <span class="icon iconfont">&#xe71a;</span>

                  </div>

                </div>

              </div>



              <div class="down-all-btn">

              <!-- <div class="down-all-btn">

                <el-button plain size="small" @click="batchUpdate('both')" round

                  >全部更新</el-button

                >

              </div>

              </div> -->

            </div>



            <div class="main-content">

@@ -119,7 +133,10 @@
                  >

                </div>

              </div>

              <div class="front-page-items" v-if="activeName != '离线升级/安装'">

              <div

                class="front-page-items"

                v-if="activeName != '离线升级/安装'"

              >

                <div

                  class="front-page-item"

                  v-for="(item, index) in tempList"

@@ -127,6 +144,9 @@
                  @click="checkDetail(item)"

                >

                  <div class="icon-img">

                    <span class="icon iconfont" v-if="item.isUpgrade"

                      >&#xe719;</span

                    >

                    <img

                      v-if="item.iconBlob"

                      :src="

@@ -146,6 +166,7 @@
                    <el-button

                      size="small"

                      type="primary"

                      class="other-btn"

                      round

                      @click="checkDetail(item)"

                      v-if="activeName == '应用中心'"

@@ -154,19 +175,23 @@
                    <el-button

                      size="small"

                      type="primary"

                      class="check-btn"

                      round

                      v-if="

                        activeName == '已激活' &&

                        (activeTab == 'sdk' ||

                          (activeTab == 'app' && !item.isDefault))

                        ((activeTab == 'sdk' && !item.isUpgrade) ||

                          (activeTab == 'app' &&

                            !item.isUpgrade &&

                            !item.isDefault))

                      "

                      @click.stop="unLoadSdkOrApp(item)"

                      >卸载</el-button

                      >查看</el-button

                    >

                    <!-- @click.stop="unLoadSdkOrApp(item)" -->



                    <el-button

                      size="small"

                      type="primary"

                      class="check-btn"

                      round

                      v-if="

                        activeName == '已激活' &&

@@ -179,6 +204,7 @@
                    <el-button

                      size="small"

                      type="primary"

                      class="other-btn"

                      round

                      v-if="

                        activeName == '已激活' &&

@@ -188,6 +214,58 @@
                      "

                      >升级</el-button

                    >

                    <el-button

                      size="small"

                      type="primary"

                      class="update-btn"

                      round

                      @click.stop="donwloadSDK(item)"

                      v-if="

                        (activeName == '更新' || activeName == '已激活') &&

                        activeTab == 'sdk' &&

                        item.isUpgrade &&

                        !item.upgradeLoading

                      "

                      >更新</el-button

                    >

                    <span

                      class="icon iconfont rocket-icon"

                      v-if="

                        activeName == '更新' &&

                        item.isUpgrade &&

                        item.upgradeLoading &&

                        rocketIf

                      "

                      >&#xe70c;</span

                    >

                    <span

                      class="icon iconfont rocket-icon"

                      v-if="

                        activeName == '更新' &&

                        item.isUpgrade &&

                        item.upgradeLoading &&

                        !rocketIf

                      "

                      >&#xe717;</span

                    >

                    <el-button

                      size="small"

                      type="primary"

                      class="update-btn"

                      round

                      @click.stop="downloadApp(item, 'upgrade')"

                      v-if="

                        (activeName == '更新' || activeName == '已激活') &&

                        activeTab == 'app' &&

                        item.isUpgrade &&

                        !item.upgradeLoading

                      "

                      >更新</el-button

                    >



                    <div class="status">

                      {{ item.progressMsg }}

                    </div>

                  </div>

                </div>



@@ -195,6 +273,7 @@
                  class="front-page-item item-dimmed"

                  v-for="(item, index) in tempDarkList"

                  :key="index"

                  @click="checkDetail(item, 'activeNotInstall')"

                >

                  <div class="icon-img">

                    <img

@@ -216,31 +295,55 @@
                    <el-button

                      size="small"

                      type="primary"

                      class="other-btn"

                      round

                      @click="donwload(item)"

                      v-if="activeTab == 'sdk' && !item.upgradeLoading"

                      @click.stop="donwloadSDK(item)"

                      >安装</el-button

                    >

                    <el-button

                      size="small"

                      type="primary"

                      class="other-btn"

                      round

                      v-if="activeTab == 'app' && !item.upgradeLoading"

                      @click.stop="downloadApp(item)"

                      >安装</el-button

                    >

                    <div class="spin-icon">

                      <span

                        class="icon iconfont anz-font"

                        v-if="item.upgradeLoading"

                        >&#xe70a;</span

                      >

                    </div>

                    <div class="status">

                      {{ item.progressMsg }}

                    </div>

                  </div>

                </div>

              </div>



              <div class="upload-pkg">



              <div class="upload-pkg" v-if="activeName == '离线升级/安装'">

                <div class="upload-head">

                  <div class="left">

                    <span class="icon iconfont">&#xe754;</span>

                    <span class="txt">上传安装软件</span>

                  </div>

                  <div class="right">

                    <span class="icon iconfont">&#xe711;</span>

                    <span class="icon iconfont">&#xe712;</span>

                  </div>



                </div>





                <FileUploader

                  class="upload-demo"

                  single

                  tip

                  :isDrag="true"

                  tipWords="点击上传"

                  uploadPlaceholder="算法软件"

                  url="/data/api-v/sdk/upload"

                  @complete="onFileUpload"

                  @file-added="onFileAdded"

                />

              </div>



            </div>

          </div>



@@ -253,6 +356,53 @@
        </div>

      </div>

    </div>



    <el-dialog

      title="安装包信息"

      :visible.sync="installDialogVisible"

      width="40%"

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

    >

      <div class="installInfo">

        <template v-if="installAppPackage != null">

          <div>

            <div>

              <span>安装包名称：</span>

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

            </div>

            <div>

              <span>安装版本：</span>

              <span>{{ installAppPackage.version }}</span>

            </div>

            <div>

              <span>更新内容：</span>

              <span>{{ installAppPackage.installContent }}</span>

            </div>

          </div>

        </template>

        <template v-if="installSdkPackage != null">

          <div>

            <div>

              <span>安装包名称：</span>

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

            </div>

            <div>

              <span>安装版本：</span>

              <span>{{ installSdkPackage.version }}</span>

            </div>

            <div>

              <span>更新内容：</span>

              <span>{{ installSdkPackage.installContent }}</span>

            </div>

          </div>

        </template>

        <p>确定安装？</p>

      </div>

      <div slot="footer" class="dialog-footer">

        <el-button @click="installDialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="offlineInstall">安 装</el-button>

      </div>

    </el-dialog>

  </div>

</template>

<script>

@@ -262,6 +412,7 @@
  installSdk,

  getInstallInfo,

  removeSdk,

  uploadSDK,

} from "./api";

import {

  getApps,

@@ -274,7 +425,7 @@
  actApp,

} from "@/api/app";

import { getUrlKey } from "@/api/utils";

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

import FileUploader from "../FileUpload/index";

import detailPage from "./detail";

export default {

  name: "algorithmManage",

@@ -296,22 +447,17 @@
      }

      return false;

    },

    recomandUpdateList() {

      if (this.activeTab == "sdk") {

        return this.hasNewVersionSdk.slice(0, 3);

      } else {

        return this.hasNewVersionApp.slice(0, 3);

      }

    },

  },

  data() {

    return {

      installedList: [],

      recomandUpdateList: [],

      hasNewVersionSdk: [],

      activeTab: "sdk",

      hasNewVersionApp: [],

      tempDarkList: [],

      notInstalledList: [],

      showUpload: false,

      detailType: "",

      detailProductID: "",

      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],

@@ -359,6 +505,7 @@
      backStack: [],

      toUpdateArr1: [],

      forwardStack: [],

      rocketIf: false,

      backDisable: true,

      forwardDisable: true,

      showInputCode: false,

@@ -407,7 +554,7 @@
    },

    batchUpdateSDK() {

      this.hasNewVersionSdk.forEach((sdk) => {

        this.donwload(sdk, 0);

        this.donwloadSDK(sdk);

      });

    },

    batchUpdateApp() {

@@ -458,6 +605,7 @@
          this.activeTab == "sdk"

            ? this.hasNewVersionSdk

            : this.hasNewVersionApp;



        this.tempDarkList = [];

      }

    },

@@ -474,12 +622,6 @@
      } else {

        this.detailType = this.activeName == "应用中心" ? "inactive" : "active";

      }

    },

    resetStack() {

      this.forwardStack = [];

      this.backStack = [];

      this.backDisable = true;

      this.forwardDisable = true;

    },

    checkInWindow(item) {

      this.backStack.push([this.productDetail, this.otherProducts]);

@@ -553,66 +695,44 @@
        .then((res) => {

          if (res.success) {

            this.isInstall = false;

            this.$message({

              type: "success",

              message: '安装成功,将跳转至"已激活"中查看',

            });

            this.$message.success('安装成功,将跳转至"已激活"中查看');

            setTimeout(() => {

              this.getAllSdk();

              window.parent.postMessage({ msg: "AppUpdate" }, "*");



              this.activeName = "已激活";

            }, 3000);

          }

        })

        .catch((e) => {

          this.isInstall = false;

          this.$message({

            type: "error",

            message: e.data,

          });

          this.$message.error(e.data);

        });

    },

    downloadApp(app, action) {

      if (action == "upgrade") {

        app.upgradeLoading = true;

      } else {

        app.installLoading = true;

      }

      let _this = this;

      let timer = null;

      app.upgradeLoading = true;

      timer = setInterval(() => {

        this.rocketIf = !this.rocketIf;

      }, 350);



      let _this = this;

      installApp({ path: app.id })

        .then((res) => {

          if (res && res.success) {

            _this.$notify({

              title: "成功",

              message: "安装应用成功",

              type: "success",

            });

            _this.$notify.success("安装应用成功");

            clearInterval(timer);

            app.upgradeLoading = false;

            setTimeout(() => {

              if (action == "upgrade") {

                app.upgradeLoading = false;

              } else {

                app.installLoading = false;

              }

              window.parent.postMessage({ msg: "AppUpdate" }, "*");

            }, 3000);

          } else {

          }

        })

        .catch((e) => {

          _this.$notify({

            title: "安装失败",

            message: e.data,

            type: "warning",

          });

          if (action == "upgrade") {

            app.upgradeLoading = false;

          } else {

            app.installLoading = false;

          }

          _this.$notify.warning(e.data);

          clearInterval(timer);

          app.upgradeLoading = false;

        });



      // 开启自动刷新

      this.appUpgreading = true;

    },

@@ -630,17 +750,17 @@
            { unloadLoading: false, upgradeLoading: false },

            item

          );

          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {

          if (

            obj.progressMsg !== "" &&

            obj.progressMsg !== "已安装" &&

            obj.progressMsg != "100%"

          ) {

            obj.upgradeLoading = true;



            this.appUpgreading = true;

          }



          if (obj.upgradeDone) {

            this.$notify({

              type: "success",

              message: 1 ? "算法安装成功" : "算法升级成功",

            });

            this.$notify.success(1 ? "算法安装成功" : "算法升级成功");

          }



          item.installed ? iArry.push(obj) : sArry.push(obj);

@@ -664,12 +784,7 @@
                app.unloadLoading = false;

                _this.getAllApps();

                window.parent.postMessage({ msg: "AppUpdate" }, "*");



                _this.$notify({

                  title: "成功",

                  message: "卸载应用成功",

                  type: "success",

                });

                _this.$notify.success("卸载应用成功");

              }

            })

            .catch((e) => {

@@ -704,6 +819,21 @@
      getUnActivedSdk().then((res) => {

        if (res.code == 200) {

          this.unActivedSDKList = res.data;

          const len = this.unActivedSDKList.length;

          const set = new Set();

          if (len <= 3) {

            this.recomandUpdateList = [...this.unActivedSDKList];

          } else {

            for (let i = 0; i < 3; i++) {

              const pickI = Math.floor(Math.random() * len);

              if (set.has(pickI)) {

                i--;

                continue;

              }

              set.add(pickI);

              this.recomandUpdateList.push(this.unActivedSDKList[pickI]);

            }

          }

          v == 1 ? (this.tempList = res.data) : null;

        }

      });

@@ -820,9 +950,12 @@
            { unloadLoading: false, upgradeLoading: false },

            item

          );

          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {

          if (

            obj.progressMsg !== "" &&

            obj.progressMsg !== "已安装" &&

            obj.progressMsg !== "100%"

          ) {

            obj.upgradeLoading = true;



            this.sdkUpgreading = true;

          }



@@ -875,64 +1008,17 @@
        })

        .catch((e) => {});

    },

    upgradeSDKinWin() {

      this.isUpgrading = !this.isUpgrading;

      let _this = this;

      if (this.productDetail.productTypeName == "应用") {

        installApp({ path: this.productDetail.productBaseId })

          .then((res) => {

            if (res && res.success) {

              this.$notify.success("升级完成");

              this.needToUpgradeInWin = false;

              this.productDetail.isUpgrade = false;

              this.isUpgrading = !this.isUpgrading;

            }

          })

          .catch((e) => {

            this.$notify.warning("升级失败");

            this.isUpgrading = !this.isUpgrading;

          });



        // 开启自动刷新

        this.appUpgreading = true;

      } else {

        downloadSdk({ path: this.productDetail.productBaseId })

          .then((res) => {

            this.needToUpgradeInWin = false;

            this.productDetail.isUpgrade = false;

            this.isUpgrading = !this.isUpgrading;

            this.$notify.success("升级完成");

          })

          .catch((err) => {

            this.$notify.warning("升级失败");

            this.isUpgrading = !this.isUpgrading;

          });

        this.sdkUpgreading = true;

      }

    },

    downloadSdkInSide() {

      this.downloadItem = this.productDetail.productBaseId;

      this.isUpgrading = true;

      downloadSdk({ path: this.productDetail.productBaseId })

        .then((rsp) => {

          this.productDetailVisible = false;

          this.downloadItem = "";

          this.$notify.success("算法已安装");

          this.isUpgrading = false;

        })

        .catch((err) => {

          this.$notify.warning(err.data);

          this.downloadItem = "";

          this.isUpgrading = false;

        });

      // 开启自动刷新

      this.sdkUpgreading = true;

    },

    donwload(item) {

    donwloadSDK(item) {

      let timer = null;

      item.upgradeLoading = true;

      timer = setInterval(() => {

        this.rocketIf = !this.rocketIf;

      }, 350);

      this.downloadItem = item.id;

      downloadSdk({ path: item.id })

        .then((rsp) => {

          clearInterval(timer);

          item.upgradeLoading = false;

          this.downloadItem = "";

          window.parent.postMessage({ msg: "AppUpdate" }, "*");

@@ -944,9 +1030,6 @@
        });

      // 开启自动刷新

      this.sdkUpgreading = true;

    },

    inputBlur(item) {

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

    },

    autoRefreshAppAndSdkState() {

      // 关闭后退出

@@ -973,31 +1056,6 @@
  height: 100%;

  box-sizing: border-box;

  text-align: left;

  min-width: 1106px;

}

.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;

}



.update-badge .el-badge__content.is-fixed {

  top: 10px;

  right: 4px;

}



.task-manage {

@@ -1067,12 +1125,14 @@
            border-left: 3px solid #f3f6fc;

            cursor: pointer;

            caret-color: transparent;

            .el-badge__content {

              border-radius: 50%;

            sup {

              background-color: #f52323;

              font-size: 12px;

              height: 14px;

              line-height: 14px;

              padding: 0px 3px;

              color: #fff;

              height: 18px;

              line-height: 18px;

              padding: 0 3.5px;

              border-radius: 50%;

            }

          }

          .menu-item:hover {

@@ -1084,12 +1144,20 @@
            border-left: 3px solid #23d7ee;

            font-weight: 700;

            font-size: 16px;

            //  transition: transform .3s cubic-bezier(.645,.045,.355,1);

            color: #333;

          }

        }

        .nav-box-search {

          z-index: 99;

          position: relative;

          .all-scene {

            position: absolute;

            z-index: 100;

            right: 64px;



            top: 10px;

            font-size: 12px;

          }

          .el-input {

            position: relative;

            font-size: 12px;

@@ -1099,17 +1167,19 @@
              border: none;

              height: 30px;

              line-height: 30px;

              padding: 0 12px;

            }

            .el-input-group__prepend {

              border-right: 0;

              border: none;

              border-radius: 20px;

              background: #fff;

              padding: 0 25px;

              padding: 0 0 0 15px;



              i {

                font-weight: 600;

                color: #333;

                font-size: 19px;

                font-size: 16px;

              }

            }

            .el-input-group--append .el-input__inner,

@@ -1122,7 +1192,7 @@
              border-left: 0;

              border: none;

              border-radius: 20px;

              width: 64px;

              width: 52px;

              background: linear-gradient(

                180deg,

                #ecfcfe 0%,

@@ -1138,11 +1208,38 @@
                  font-size: 12px;

                  font-weight: bold;

                  letter-spacing: 0.5px;

                  padding: 0 0px 0 30px;

                  color: #474747;

                }

                .el-input__suffix {

                  display: none;

                }

              }

              .el-input__inner::placeholder {

                color: rgb(71, 71, 71);

                // font-weight: 600;

              }

              .el-select-dropdown {

                min-width: 120px !important;

                left: -26px !important;

                background: rgba(236, 245, 253, 0.6);

                border-radius: 2px;

                border: none;

                .el-select-dropdown__item {

                  height: 22px;

                  line-height: 22px;

                  font-size: 12px;

                  letter-spacing: 0.4px;

                  color: #333333;

                  .icon {

                    margin-right: 5px;

                    font-size: 15px;

                  }

                }

                .el-select-dropdown__item.hover,

                .el-select-dropdown__item:hover {

                  background-color: #ebf4fd;

                  font-weight: 600;

                }

              }

            }

            .el-input-group__prepend .el-select {

@@ -1163,8 +1260,8 @@
          position: absolute;

          z-index: 1;

          right: 0;

          top: 70px;

          height: 200px;

          top: 41px;

          height: 229px;

          img {

            height: 100%;

          }

@@ -1185,16 +1282,26 @@
        height: 75px;

        display: flex;

        align-items: center;

        .left-items {

          display: flex;

        }

        .quick-item {

          display: flex;

          cursor: pointer;

          padding: 2px 20px;

          height: 52px;

          box-sizing: border-box;

          border-right: 1px solid #e0e0e0;



          .icon-img {

            width: 48px;

            height: 48px;

            position: relative;

            .icon {

              position: absolute;

              right: -7px;

              top: -7px;

              font-size: 13px;

            }

            img {

              width: 48px;

              height: 48px;

@@ -1219,11 +1326,17 @@
            }

          }

          .right-icon {

            padding: 5px 0;

            padding: 2px 0;



            .icon {

              font-size: 21px;

            }

          }

        }

        .quick-item:not(:last-child) {

          border-right: 1px solid #e0e0e0;

        }

        .down-all-btn {

          // margin-left: 25px;

          position: absolute;

          right: 30px;

          .el-button {

@@ -1236,7 +1349,7 @@
        }

      }

      .main-content {

        padding: 35px 60px;

        padding: 35px 82px;

        z-index: 99;

        .main-title {

          line-height: 25px;

@@ -1250,7 +1363,7 @@
          .group-left {

            display: flex;

            .tab {

              font-size: 15px;

              font-size: 14px;

              margin-right: 25px;

              line-height: 28px;

              cursor: pointer;

@@ -1279,30 +1392,43 @@
          }

        }

        .front-page-items {

          padding-top: 30px;

          padding-top: 25px;

          .front-page-item {

            float: left;

            display: flex;

            margin-bottom: 30px;

            padding: 2px 0;

            height: 60px;

            margin: 0 5px;

            margin-bottom: 15px;

            box-sizing: border-box;

            width: 278px;

            width: 274px;



            justify-content: center;

            cursor: pointer;

            border-radius: 6px;



            padding: 10px 0;

            height: 76px;

            border-radius: 4px;



            .icon-img {

              width: 58px;

              height: 58px;

              position: relative;

              .icon {

                position: absolute;

                right: -9px;

                top: -9px;

                font-size: 16px;

              }

              img {

                width: 58px;

                height: 58px;

                border-radius: 10px;

              }

            }

            .desc {

              box-sizing: border-box;

              padding: 0 12px;

              width: 140px;

              width: 147px;



              .desc-1 {

                font-size: 14px;

                font-weight: bold;

@@ -1320,26 +1446,66 @@
              }

            }

            .right-btn {

              padding: 5px 0;

              .el-button {

                padding: 3px 12px;

              padding: 2px 0;

              width: 50px;

              text-align: center;

              position: relative;

              .check-btn {

                background-color: #f2f2f7 !important;

                border-color: #f2f2f7 !important;

                color: #4f4f4f;

              }

              .update-btn {

                border-color: #23d7ee !important;

                background-color: rgba(29, 212, 236, 0.1) !important;

                color: #4f4f4f;

              }

              .other-btn {

                background-color: #1dd4ec !important;

                border-color: #1dd4ec !important;

                border-radius: 22px;

                color: #ffffff;

              }

              .el-button--primary:hover {

                background: #089fb3 !important;

                border-color: #089fb3 !important;

              @keyframes spin {

                from {

                  transform: rotate(0deg);

                }

                to {

                  transform: rotate(360deg);

                }

              }

              .anz-font {

                font-size: 28px;

                color: #333;

              }



              .spin-icon {

                animation: spin 0.8s linear infinite;

              }

              .status {

                font-size: 12px;

                color: #828282;

                white-space: nowrap;

                overflow: hidden;

                text-overflow: ellipsis;

                min-width: 100px;

                text-align: end;

                position: absolute;

                right: 0;

                margin-top: 2px;

              }

              .rocket-icon {

                font-size: 20px;

              }

              .el-button {

                padding: 3px 12px;

                border-radius: 22px;

                font-weight: bold;

                letter-spacing: 0.5px;

              }

            }

          }

          .front-page-item:hover {

            background: linear-gradient(

              180deg,

              #ecfcfe 0%,

              #ebf4fd 47.92%,

              #f4f4fe 100%

            );

            // background-color: #f2f2f7;

          }

          .item-dimmed {

            color: gray;

@@ -1353,29 +1519,53 @@
          clear: both;

          visibility: hidden;

        }

        .upload-pkg{

          .upload-head{

        .upload-pkg {

          .upload-head {

            display: flex;

    justify-content: space-between;

    align-items: center;

            .left{

            justify-content: space-between;

            align-items: center;

            .left {

              display: flex;

              align-items: center;

              .iconfont{

              .iconfont {

                font-size: 18px;

                margin-right: 6px;

              }

              .txt{

                    font-size: 16px;



              .txt {

                font-size: 16px;

              }

            }

            .right{

              .icon{

                margin-right: 10px;

            .right {

              .icon {

                margin-right: 11px;

                font-size: 17px;

                cursor: pointer;

              }

            }

          }

        }

        .upload-demo {

          margin: 30px 0px;

          .drag-txt {

            width: 340px;

            height: 45px;

            border: 1px dashed #bdbdbd;

            display: flex;

            margin-top: 30px;

            align-items: center;

            justify-content: center;

            color: #828282;

            font-size: 14px;

          }

          .txt-btn {

            width: 78px;

            margin-top: 18px;

            height: 19px;

            background: #23d7ee;

            border-radius: 22px;

            color: #ffffff;

            font-weight: bold;

            font-size: 12px;

          }

        }

      }

@@ -1415,148 +1605,11 @@
      }

    }



    .list-choose-item {

      cursor: pointer;

      position: relative;

      font-size: 14px;

      display: inline-block;

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

        margin: 30px 20px 20px 20px;

      }

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

        margin: 30px 20px 20px 10px;

      }

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

        margin: 30px 10px 20px 10px;

      }

      min-width: 126px;

      height: 120px;

      transition: all 1s;

      background: #fff;

      border: 1px solid #e2e2e2;

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

      border-radius: 4px;

    }

    .list-choose-item:hover {

      .mask {

        display: block;

      }

    }



    .list-choose-item-left {

      cursor: pointer;

      position: relative;

      font-size: 14px;



      transition: all 1s;

      border-radius: 4px;

      p {

        display: none;

        text-align: right;

        width: 100%;

        position: absolute;

        right: 10px;

        top: 5px;

      }

      .click-download {

        position: absolute;

        left: 80%;

        top: 5%;

      }

    }

    .list-choose-item-left:hover {

      .mask {

        display: flex;

        align-items: flex-end;

        flex-wrap: wrap;

        justify-content: center;

        top: 0;



        .bot-btn {

          flex: 1;

        }

        &.flex-center {

          align-items: center;

          justify-content: center;

        }

      }

    }

    .list-choose-item-left-uninstal {

      color: gray;

      filter: grayscale(100%);

    }

    .list-complete-item.sortable-chosen {

      background: #4ab7bd;

    }

    .list-choose-item.sortable-ghost {

      background: #30b08f;

    }



    .list-choose-header {

      position: relative;

      width: 74px;

      height: 74px;

      background-image: linear-gradient(-137deg, #7076f2 0%, #3d63e1 100%);

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

      border-radius: 37px;

      margin: 10px 25px;

    }



    .b-top {

      width: 100%;

      padding-top: 10px;

    }

    .b-bottom {

      width: 100%;

      border-bottom: 1px solid rgba(24, 28, 33, 0.5);

    }

    .i-set-right {

      position: absolute;

      left: 80px;

      top: -11px;

      font-size: 24px;

    }

    .i-remove-right {

      position: absolute;

      right: -1px;

      top: -11px;

      font-size: 24px;

      color: red;

    }

    .alg-t {

      line-height: 31px;

      font-family: PingFangSC-Medium;

      font-size: 14px;

      color: #222222;

    }

    .alg-name {

      line-height: 20px;

      font-family: PingFangSC-Regular;

      font-size: 14px;

      letter-spacing: 0.05em;

      color: #333;

      .el-input {

        position: relative;

        font-size: 14px;

        display: inline-block;

        width: 100%;

      }

    }



    .el-input {

      position: relative;

      font-size: 14px;

      // display: inline-block;

      // width: 80%;

    }



    .drag-info {

      min-width: 126px;

      height: 120px;

      border: 1px dashed #3d68e1;

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

      border-radius: 4px;

      margin: 30px 10px 20px 10px;

    }



    .el-button--cancle {

@@ -1567,39 +1620,6 @@
      font-size: 13px;

      color: #222222;

      margin-right: 12px;

    }



    .task-name-google {

      position: relative;

      top: 30px;

      width: 126px;

      height: 120px;

      border: 1px solid #fff;

      background: #fff;

      border-radius: 4px;

      cursor: pointer;

      .set-task {

        display: none;

        cursor: pointer;

      }



      .el-switch__core {

        width: 27px !important;

        height: 14px;

      }

      .el-switch__core:after {

        width: 10px;

        height: 10px;

      }

      .el-switch.is-checked .el-switch__core::after {

        left: 100%;

        margin-left: -11px;

      }

    }

    .task-name-google:hover {

      .mask {

        display: block;

      }

    }

  }

}