yudao-ui-saas/src/views/index.vue

<template>
  <div>
    <div class='fixed-header'>
      <homebar />
    </div>
    <div class="dashboard-container">

      <div v-if="!hasCorp" class="dashboard-no-corps">
        <div class="dashboard-no-corp-title">你当前没有任何企业</div>
        <div class="dashboard-no-corp-content" @click="joinOrCreateCorp('加入')">
          <div class="no-corp-pic">
            <img src="https://g.jdycdn.com/app/pc/e3993c2b1a60.png">
          </div>
          <div class="no-corp-title">加入企业/团队</div>
          <div class="no-corp-subtitle">你需要邀请链接才能加入到企业/团队中，若此时没有邀请链接，你可以向管理员或创建者索要邀请链接加入到该企业/团队中。</div>
        </div>
        <div class="dashboard-no-corp-create" @click="joinOrCreateCorp('创建')">创建企业/团队</div>
      </div>

      <div v-else class="dashboard-corps">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card" style="height: 197px;">
              <div class="flow-center-wrapper">
                <div class="my-todo">
                  <div class="todo-wrapper">
                    <div class="image-wrapper">
                      <img class="todo-image"
                        src="data:image/png;base64,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"
                        alt="">
                    </div>
                    <div class="todo-count" @click="handleSelect('/task/todo')">
                      <div class="todo-count-text">我的待办</div>
                      <div class="todo-count-number">1</div>
                    </div>
                  </div>
                </div>
                <div class="x-divider x-divider-vertical wrapper-divider"></div>
                <div class="flow-steps">
                  <div class="step-wrapper" @click="handleSelect('/task/done')">
                    <img class="step-image"
                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAACFlBMVEUAAAAAAP8A//8AgP8Aqv+qqv8AgP+Av/8Amf+ZzP8qgP8ggP+fv/+Oxv8agP8Xi/8ui+iL0f8VgOoqlf8niesnif+Stu0gj/8eh/+Oxv+PwvUnif8mhPYkifYiiPciiP8hjP8oh/coj/+Pw/gjjvgiivghifgkjPkji/mRxfmQyP8kh/okjfokivqRw/qQw/okifoki/Yki/sjiPsjjfsjivsijPuQw/sljPuQwfski/cki/sli/sljPuTxPySw/wkifgjifwlivkjiPkmi/mSw/wkifojivojjPojivolivqQxPqQwvokifqRw/qSxPojivokivgki/ski/uQw/uRw/uSxPskivkjifkli/kkifkki/uRwvmRxPuTxPskivsjivkli/kjivgjivokivoki/okivoki/qQw/oki/iRw/okivokivkkivqRxPwli/kki/kkivmRwvskivkkivkkivmSwvskivmRw/skivmRw/skifkkivkkivojivokivgkivoki/oki/oji/okivoki/okivokivokifkki/kki/ojivokivkkivkkivokivkkivkkivkjifkkivkkivkkivkkivkkivkjivkkifokivokivgkivokifgkivoli/ojivokivokivokivkkivoki/ojivojivkkivkkivkkivokivkkivokivkjivkkivkki/okivmSNfP3AAAAsXRSTlMAAQECAwMEBAUFBggICQoLCwsMDA0NDhAREhkaGxweHh8gICIkJScqLCwuMTEyMzc4OTk6Ojs8PD4+QEBERUlNTlBTWFhZXV5fYGBjZWprbG1xcnd4e36BgoSGhoaGhoeJipCQlJWWlpqcnKSlpaWnqaqsr7CxsbKys7O2t7q7vr+/wcPExcbP0NDQ0dLT09fa3t/h4uPk5efo6Onp6urt7u7v8fHx9fb29/f4+Pr8/v7IYf4CAAACFElEQVRYw2NgGAWjYBQMGsCq5xMaG4cXhPlZ8hJtnn5GFTEgz55I81wrqogEIezEmGdXRTzwJ8I8ySISDKzSImygNynmVcUQNjCLJAPLxAiZx1NFGtAkZKAUiQaaEzKQU5k0IDgM8jGXqpkVscBCXYCQcRq5SzaSAtbU2OAzjjF83UaSQT4fbgPTNpIDmrhwmee+kTyQjMM87mlkGrhWBbuBjhvJBRHYDUwh28A27AaWkm3gVOwGNpBt4FLsBjYSqX1KyzxqGrjAgYGBzXct1QxcbQJWG0gtAze4Q9PsMioZGA9TPIE6BpYwM1DVhV1CMLXUCcOZ8jClJqvJM3DhImTeKiOYSoVZZKXDDkMGBoN2RAS7wRQKd5OVsCeLgwSFamH8aJg65lLysl4QtNIqgHCLmWDqEsjMy7YwB6WDeJ38MGUeG8g00BMuEbFx4ww5GMd0NbmlTQvcjwwBKwxgTMU55BdfqQgTZWEMkR5KysMcDnQlzOWUFbDV6HV4IqUldqsEigovyquAPmkkBWarqVCnTFKFyyvNpUolNVsXKi3aS6Vab7E1JIIrqVaNrnQBZelMatbLzVFJE2lY0Q+cgXVkGzgfu4HZZBvYj93AYLINLMBuoNp6cg10xtHILiDXxyw4DJSZTpZ5q41x9lN0yDFxuROerpRMAcnh2KyNv7OnFpxT10gsqC+MNBgdNhsFo2AwAAAtOPG9B304zAAAAABJRU5ErkJggg=="
                      alt="">
                    <div class="step-text">我处理的</div>
                  </div>
                  <div class="step-wrapper" @click="handleSelect('/task/my')">
                    <img class="step-image"
                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAABGlBMVEUAAAAAAP8AgP8Aqv8AgP8zmf8qgP8ggP8Xi/8qlf8iiP8gj/8cgPEdif8kif8ikP8hjPchjP8ni/cjh/gjjvgmjPkji/kiiPkijv8jjPoiifoki/sjivgjiPgki/gkifgjifwlivkkjPwkifolivwji/oljPolivojivski/skifkki/kjjPkli/kkivokivokifglivolifkli/oki/oki/kkivskivklivkki/kjivoli/ojivojifgji/gji/okivokivkkivkkivkkivkkivkkivkki/okivkkivkkivkkivgkivgkivkjivkkivokivokifkkivojivkkivkkivokivkkivojivkjivkkivkkivkki/okivmdXVYCAAAAXXRSTlMAAQIDBAUGCAsMDxASGhweHx8hJCQoLC0tMzQ5SElNTlBTVF1gZWZvdHmAhomKjI6PkqCgoaKqrK64u8HCw8PDxMjL09TW19vi4+Tq6+3v7/Dz9Pb39/r6/P39/v7dYDghAAACJElEQVRYw+2YWTMDQRSF7zDELrGMMIg1CGaQCCJ2IvYlCYlx///f8KB40Hd6breOKlU5r3Pqq5ma7nMXgJZa+ifqijuu68S7TLB6Un6hHCAiIgblgp/q+Q2tN12s4w/Vi+leTdxotoakatlRDdxwvoGhauSHFXGxTBWlqmZiKrxkCSNVSvJ5ixVkqLLIxFkeMuVZHJ6dQ7ZyNuP9tlFBueh39FBJXuT/QEVF/JlkRRVYkZ6eWAmVVZKd8AxqKCO5v1UdYDX8XudRS/nQvGroARthaZal3I9LE/NnEcRsSD6TeToJAPbykxRYozM8TXmvP58N7EiJaRJ4SFnPv55OXkqARbK+1aVAaYjXqVqYQjkQYGQvlJgigH4kEGDuKgToE8ACAwjd3itpKxDAMgcIMHZE2cpE/xLwgGAt3Ii2QOx7EsgEAvTtir6E4HL4QGi7EHyOYHIVgLAm+NzfAbcYQJVPHn9mfHKcD5x7FH1x/WPTufnOOjbcgz10yjzYvKsHM/fsq8cJhw4/4IdDdHzB4IlKfEUFLMD0nVLAQlEOtNcDtRJAF6lv4MCxcpEiy+gXcOpWvYyShf7BAgBoX33TKPR0KzIPAP37eq0I2Sy9bMyu3Go2S+bbOeMNp/mW2HjTbn6sMD/4gJVT4TFGM7AVhr1txvBofrw1P4A3YUVgfolhfs3ShEXQ56rqQFxVHWivqpqwTPvuexKO6zoJI+u+llr6C30AImnPnDDxrmkAAAAASUVORK5CYII="
                      alt="">
                    <div class="step-text">我发起的</div>
                  </div>
                 
                  <!-- <div class="step-wrapper flow-ccuser-my">
                    <img class="step-image"
                      src="data:image/png;base64,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"
                      alt="">
                    <div class="step-text">抄送我的</div>
                  </div>
                  <div class="step-wrapper flow-new-launch">
                    <img class="step-image" src="data:image/png;base64,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" alt="">
                    <div class="step-text">发起流程</div>
                  </div> -->
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" style="height: 197px; font-size: 16px;">
              <div class="card-title">
                <div class="title-left">
                  消息
                </div>
                <div class="title-right">
                  <el-button type="text" @click="goMyList">更多</el-button>
                </div>
              </div>
              <div class="card-content">
                <el-empty :image-size="50" v-if="notifyMessageList.length <= 0"></el-empty>
                <div class="step-list" v-else>
                  <div class="step-item" v-for="(item, index) in notifyMessageList" :key="index">
                    <div class="step-title-left" :title="item.templateContent">
                      {{ item.templateContent }}
                    </div>
                    <div class="step-title-right">
                      {{ item.createTime }}
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <app-list style="margin-top: 18px;" />
      </div>

    </div>
    <el-dialog width="30%" title="联系我们" :visible.sync="dialogVisible">
      <img width="100%" src="@/assets/images/wx.jpg" alt="">

    </el-dialog>
    <el-dialog width="50%" title="新建应用" :visible.sync="dialogVisibleApp">
      <div class="scene-container">
        <div class="scene-wrapper">
          <!-- <div class="title-wrapper">
            <div class="icon-text">
              <i class="el-icon-thumb title-icon"></i>
              <span class="title-text">猜你想要</span>
            </div>
          </div> -->
          <div class="grid-row">
            <div class="grid-col">
              <div class="card-item create-blank-app" @click="innerVisible = true">
                <i class="el-icon-plus create-icon"></i>
                <div class="create-text">创建空白应用</div>
              </div>
            </div>
            <div class="grid-col">
              <div class="card-item scene-item" @click="confirmAdd()">
                <img src="https://g.jdycdn.com/app/pc/fc125acb88ce.png">
                <div class="item-info">
                  <div class="item-title">任务</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog width="30%" title="创建空白应用" :visible.sync="innerVisible" append-to-body>
        <el-form :model="form" label-position="top" label-width="80px" size="small">
          <el-form-item label="名称">
            <el-input v-model="form.name" placeholder='给应用命名，例如‘‘客户管理系统’’'></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.url" placeholder='应用访问地址，例如‘‘https://www.baidu.com/’’'></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="innerVisible = false" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog width="30%" title="编辑" :visible.sync="editVisible">
      <el-form :model="form" label-position="top" label-width="80px" size="small">
        <el-form-item label="名称">
          <el-input v-model="form.name" placeholder='给应用命名，例如‘‘客户管理系统’’'></el-input>
        </el-form-item>
        <el-form-item label="地址" v-show="form.type == 1">
          <el-input v-model="form.url" placeholder='应用访问地址，例如‘‘https://www.baidu.com/’’'></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="editVisible = false" size="small" style="float: left;">删 除</el-button>
        <el-button @click="editVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="editVisible = false" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="30%" title="切换企业/团队" :visible.sync="teamWorkVisible">
      <div class="switch-corp-pane">
        <div class="corp-block">
          <div class="corp-desc">我创建的企业/团队</div>
          <div class="corp-wrapper" v-for="(item, index) in myTeamList" :key="index" @mouseover="showMyTeam = index" @mouseleave="showMyTeam = null">
            <div class="corp-item">
              <div class="corp-name" :class="{'is-owner': item.isOwner}" :title="item.name">{{ item.name }}</div>
              <div class="corp-op">
                <span class="op-current" v-show="item.isOwner">当前所在企业/团队</span>
                <el-button v-show="!item.isOwner && showMyTeam == index" type="text" class="style-text" @click.stop="changeTeam(item)">
                  <span>进入企业/团队<i class="el-icon-right"></i></span>
                </el-button>
              </div>
            </div>
          </div>
          <el-button type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('创建')">
            <span>创建企业/团队</span>
          </el-button>
          
        </div>
        <div class="corp-block" style="margin-top: 10px;">
          <div class="corp-desc">我加入的企业/团队</div>
         
          <div class="corp-wrapper" v-for="(item, index) in joinTeamList" :key="index" @mouseover="showJoinTeam = index" @mouseleave="showJoinTeam = null">
            <div class="corp-item">
              <div class="corp-name" :title="item.name">{{ item.name }}</div>
              <div class="corp-op">
                <span class="op-current" v-show="item.isOwner">当前所在企业/团队</span>
                <el-button v-show="!item.isOwner && showJoinTeam == index" type="text" class="style-text" @click.stop="changeTeam(item)">
                  <span>进入企业/团队<i class="el-icon-right"></i></span>
                </el-button>
              </div>
            </div>
          </div>
          <el-button type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('加入')">
            <span>加入企业/团队</span>
          </el-button>
        </div>
      </div>
      <el-dialog width="30%" :title="corpTitle + '企业/团队'" :visible.sync="joinOrCreateVisible" append-to-body>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-position="top" label-width="80px" size="small">
          <el-form-item label="企业/团队名称" prop="name" v-if="corpTitle == '创建'">
            <el-input v-model="form.name" placeholder='请输入你的企业/团队名称'></el-input>
          </el-form-item>
          <el-form-item label="邀请码" prop="tenantId" v-if="corpTitle == '加入'">
            <el-input v-model="form.tenantId" placeholder='请输入你的邀请码'></el-input>
          </el-form-item>
          <el-button size="small" type="primary" style="text-align: center;width: 100%;margin-top: 10px;"
            @click="submitForm('ruleForm')">
            {{ corpTitle }}
          </el-button>
        </el-form>
      </el-dialog>
    </el-dialog>
    <el-dialog width="30%" :title="corpTitle + '企业/团队'" :visible.sync="joinOrCreateVisible" append-to-body>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-position="top" label-width="80px" size="small">
          <el-form-item label="企业/团队名称" prop="name" v-if="corpTitle == '创建'">
            <el-input v-model="form.name" placeholder='请输入你的企业/团队名称'></el-input>
          </el-form-item>
          <el-form-item label="邀请链接" prop="url" v-if="corpTitle == '加入'">
            <el-input v-model="form.url" placeholder='请输入你的邀请链接'></el-input>
          </el-form-item>
          <el-button size="small" type="primary" style="text-align: center;width: 100%;margin-top: 10px;"
            @click="submitForm('ruleForm')">
            {{ corpTitle }}
          </el-button>
        </el-form>
    </el-dialog>

    <el-drawer
      title="消息管理"
      :visible.sync="messageTable"
      direction="btt"
      size="50%">
      <message-table/>
    </el-drawer>
  </div>
</template>

<script>
import { getUnreadNotifyMessageList } from "@/api/system/notify/message";
import { createTenant, joinTenant,changeTenant } from "@/api/system/tenant";
import router from '@/router'
import store from '@/store'
import Homebar from '@/layout/components/Homebar'
import AppList from '@/components/AppList'
import TopNav from '@/components/TopNav'
import MessageTable from '@/components/MessageTable'

export default {
  name: 'Index',
  components: {
    Homebar,
    AppList,
    TopNav,
    MessageTable
  },
  data() {
    return {
      showMyTeam: null,
      myTeamList: [
        {
          id: 1,
          name: 'sunny',
          isOwner: true,
        },
        {
          id: 2,
          name: 'jacker',
          isOwner: false,
        },
      ],
      showJoinTeam: null,
      joinTeamList: [
        {
          id: 3,
          name: 'DP开发团队',
          isOwner: false,
        },
        {
          id: 4,
          name: '开发团队',
          isOwner: false,
        },
      ],
      hasCorp:true,
      corpTitle: '',
      form: {
        type:1,
        name: '',
        tenantId: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入你的企业/团队名称', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        tenantId: [
          { required: true, message: '请输入你的邀请码', trigger: 'blur' },
        ],
      },
      // 遮罩层
      loading: false,
      // 列表
      notifyMessageList: [
        // {
        //   templateContent: 'Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。',
        //   createTime: '2024-07-02'
        // },
        // {
        //   templateContent: 'Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。',
        //   createTime: '2024-07-02'
        // },
        // {
        //   templateContent: 'Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。',
        //   createTime: '2024-07-02'
        // },
        // {
        //   templateContent:'Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。',
        //   createTime:'2024-07-02'
        // },
      ],
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      dialogVisible: false,
      dialogVisibleApp: false,
      innerVisible: false,
      editVisible: false,
      teamWorkVisible: false,
      joinOrCreateVisible: false,
      messageTable:false
    }
  },
  computed: {
    topNav: {
      get() {
        return this.$store.state.settings.topNav
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    //切换企业
    changeTeam(val){
      console.log(val);
      changeTenant({tenantId:val.id}).then(response => {
              this.$modal.msgSuccess("切换成功");
            });
    },
     // 菜单选择事件
     handleSelect(item) {
      let key = item;
      const menus = [
        {
          "id": 1,
          "parentId": 0,
          "name": "审批中心",
          "path": "/task",
          "component": null,
          "componentName": null,
          "icon": "cascader",
          "visible": true,
          "keepAlive": true,
          "alwaysShow": true,
          "children": [
          {
              "id": 1207,
              "parentId": 1200,
              "name": "我的代办",
              "path": "todo",
              "component": "bpm/task/todo/index",
              "componentName": "BpmTodoTask",
              "icon": "eye-open",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 1208,
              "parentId": 1200,
              "name": "已处理",
              "path": "done",
              "component": "bpm/task/done/index",
              "componentName": "BpmDoneTask",
              "icon": "eye",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            {
              "id": 1201,
              "parentId": 1200,
              "name": "已发起",
              "path": "my",
              "component": "bpm/processInstance/index",
              "componentName": "BpmProcessInstance",
              "icon": "people",
              "visible": true,
              "keepAlive": true,
              "alwaysShow": true,
              "children": null
            },
            
           
          ]
        },
      ]
      localStorage.setItem("menus", JSON.stringify(menus))
      store.dispatch('GenerateRoutes', menus).then(accessRoutes => {
          console.log(accessRoutes);
          // 根据 roles 权限生成可访问的路由表
          router.addRoutes(accessRoutes) // 动态添加可访问路由表
        })
        setTimeout(() => {
          this.$router.push({ path: key });
        }, 200);
    },
    joinOrCreateCorp(val) {
      this.corpTitle = val;
      this.joinOrCreateVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
          if(this.corpTitle=='创建'){
            createTenant({status:0,name:this.form.name}).then(response => {
              this.$modal.msgSuccess("创建成功");
            });
          }
          else{
            joinTenant({tenantId:this.form.tenantId}).then(response => {
              this.$modal.msgSuccess("加入成功");
            });
          }
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    confirmAdd() {
      this.$confirm('确定添加此应用?', '添加应用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
      }).catch(() => {

      });
    },
    editApp(val) {
      console.log(val);
      this.form.type = val.type;
      this.form.name = val.title;
      this.form.url = val.path;
      this.editVisible = true;
    },
    openAppList() {
      this.dialogVisibleApp = true;
    },
    getList: function () {
      this.loading = true;
      getUnreadNotifyMessageList().then(response => {
        this.notifyMessageList = response.data;
        this.loading = false;
      });
    },
    goMyList: function () {
      this.messageTable = true;
      // this.$router.push({
      //   name: 'MyNotifyMessage'
      // });
    },
    fatherMethod() {
      this.dialogVisible = true;
    },
    showTeamWork() {
      this.teamWorkVisible = true;
    },
  }
}
</script>
<style>
.el-drawer__header {
    color: black;
    font-size: 20px;
    font-weight: 500;
}
.el-drawer__open .el-drawer.btt {
  height: auto !important;
  top: 45px;
}
</style>
<style lang="scss" scoped>
.el-empty {
    padding: 10px 0 !important;
}
.dashboard-no-corps {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  min-width: 800px;
  position: absolute;
  right: 0;
  top: 0;

  .dashboard-no-corp-title {
    color: #141e31;
    font-size: 24px;
    line-height: 32px;
  }
  .dashboard-no-corp-content:hover {
      box-shadow: 0 0 14px 0 rgba(31, 45, 61, .1);
  }
  .dashboard-no-corp-content {
    align-items: center;
    background: #fff;
    border: 1px solid #ebecee;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 350px;
    margin: 20px 0 24px;
    padding: 35px;
    width: 600px;

    .no-corp-pic {
      height: 200px;
      width: 350px;

      img {
        height: 100%;
        width: 100%;
      }
    }

    // .no-corp-pic>img {
    //     height: 100%;
    //     width: 100%;
    // }
    .no-corp-title {
      color: #141e31;
      font-size: 16px;
      line-height: 24px;
      margin-top: 25px;
    }

    .no-corp-subtitle {
      color: #525967;
      font-size: 12px;
      line-height: 18px;
      margin-top: 6px;
      text-align: center;
      width: 420px;
    }
  }

  .dashboard-no-corp-create {
    color: #00b899;
    cursor: pointer;
    font-size: 14px;
    line-height: 22px;
  }
}

.switch-corp-pane {
  min-height: 400px;

  .corp-block {
    .corp-desc {
      color: #525967;
      margin-bottom: 10px;
    }

    .corp-wrapper {
      border-radius: 4px;
      box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
      margin-bottom: 12px;
      max-height: 200px;
      overflow: auto;
      
      .corp-item {
        align-items: center;
        display: flex;
        height: 50px;
        justify-content: space-between;
        line-height: 50px;
        .is-owner{
          font-size: 18px;
          font-weight: 700;
        }
        .corp-name {
          flex: auto;
          max-width: 350px;
          overflow: hidden;
          padding: 0 30px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .corp-op {
          flex: none;
          .style-text{
            padding: 0 16px;
          }
          .op-current {
            color: #838892;
            padding-right: 20px;
          }
        }
      }
    }

    .corp-switch-btn {
      text-align: center;
      width: 100%;
    }

  }
}

.scene-container {
  // max-height: 500px;
  height: 500px;

  .scene-wrapper {
    margin-bottom: -10px;

    .title-wrapper {
      align-items: center;
      display: flex;
      height: 20px;
      justify-content: space-between;
      line-height: 20px;
      margin-bottom: 12px;

      .icon-text {
        align-items: center;
        display: flex;

        .title-icon {
          color: #525967;
          font-size: 16px;
          margin-right: 4px;
        }

        .title-text {
          color: #141e31;
          font-size: 14px;
          font-weight: 500;
        }
      }
    }

    .grid-row {
      margin-left: -10px;
      margin-right: -10px;
      row-gap: 0px;
      display: flex;
      flex-flow: row wrap;

      .grid-col {
        min-height: 1px;
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
        display: block;
        flex: 0 0 25%;
        max-width: 25%;

        .card-item {
          height: 120px;
          border-radius: 8px;
          cursor: pointer;
          overflow: hidden;
          position: relative;
          transition: all .2s;
        }

        .card-item:hover {
          box-shadow: 0 6px 18px 2px rgba(0, 0, 0, .06);
          transform: translateY(-6px);
        }

        .scene-item {
          img {
            height: 100%;
            width: 100%;
          }

          .item-info {
            bottom: 0;
            color: #fff;
            left: 0;
            padding: 0 20px;
            position: absolute;
            right: 0;
            top: 0;

            .item-title {
              font-size: 16px;
              font-weight: 500;
              line-height: 26px;
              margin-top: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        .create-blank-app {
          background-color: #f5f6f8;
          border: 1px solid #ebecee;
          text-align: center;

          .create-icon {
            color: #00b899;
            font-size: 32px;
            line-height: 32px;
            margin-top: 30px;
          }

          .create-text {
            color: #525967;
            font-size: 14px;
            line-height: 20px;
            margin-top: 8px;
          }
        }
      }
    }
  }
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {

  // padding: 10px;
  .step-list {
    margin: 0 10px;

    .step-item {
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .step-title-left {
        max-width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  transition: width 0.28s;
}

.dashboard-container {
  //margin-top: 50px;
  // padding: 32px;
  // background-color: rgb(240, 242, 245);
  // position: relative;
  // height: 100%;
  background: #f5f6f8;
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 60px;
  padding: 32px;
}


.flow-center-wrapper {
  background: #fff;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 160px;
  position: relative;
  width: 100%;
}

.my-todo {
  border-radius: 6px;
  height: 100%;
  padding: 20px;
  width: 32%;
}

.flow-center-wrapper .my-todo .todo-wrapper {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  justify-content: center;
}

.flow-center-wrapper .my-todo .todo-wrapper .image-wrapper {
  height: 64px;
  margin-right: 40px;
  width: 64px;
}

.flow-center-wrapper .my-todo .todo-wrapper .image-wrapper .todo-image {
  height: 100%;
  width: 100%;
}

.flow-center-wrapper .my-todo .todo-wrapper .todo-count {
  height: 64px;
}

.flow-center-wrapper .my-todo .todo-wrapper .todo-count .todo-count-text {
  font-size: 18px;
  font-weight: 500;
  height: 24px;
  line-height: 24px;
  margin-bottom: 5px;
}

.flow-center-wrapper .my-todo .todo-wrapper .todo-count .todo-count-number {
  font-size: 36px;
  font-weight: 700;
  height: 36px;
  line-height: 36px;
}

.flow-center-wrapper .wrapper-divider {
  height: 120px;
  left: 32%;
  margin: 0;
  position: absolute;
  top: 20px;
}

.x-divider-vertical {
  border: solid #EBECEE;
  border-width: 0 0 0 1px;
  display: inline-block;
  height: .9em;
  margin: 0 15px;
  vertical-align: middle;
}

.flow-center-wrapper .flow-steps .step-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: 0;
  width: 23%;
}

.flow-center-wrapper .flow-steps .step-wrapper .step-image {
  height: 40px;
  margin-bottom: 16px;
  width: 40px;
}

.flow-center-wrapper .flow-steps .step-wrapper .step-text {
  font-size: 16px;
  height: 22px;
  line-height: 22px;
  white-space: nowrap;
}

.flow-center-wrapper .flow-steps {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  justify-content: space-around;
  padding: 20px 20px 20px 16px;
  width: 68%;
}
</style>