<template>
  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
    <div style="display: flex;">
        <img src="/public/sourceTop1.jpg" alt="Logo">
        <div style="margin-left:5%;">
            <div style="display: flex;align-items: center;">
                <div style="font-size: 40px;color: rgb(51.2, 126.4, 204);margin-left: 2%;">
                    模型平台
                </div>
                <div style="font-size: 30px;color: rgb(51.2, 126.4, 204);">
                    --服务资源中心
                </div>
            </div>
            <div style="width: 60%;">
                通过模型云平台，构建模型云端计算，快捷接入与部署算力，可实现自动打包定制化模型，降低用户使用门槛，保障数据安全，提供弹性、可扩展的模型计算平台，实现模型集总式管理
            </div>
        </div>
        <div style="width: 30%;margin-right: 5%;">
            <div style="display: flex;">
                <el-input v-model="input" style="width:" placeholder="关键字搜索" />
                <el-button type="primary">搜索</el-button>
            </div>
            <div style="margin-top: 3%;">搜索热词: 预报模型 维水动力模型 API模型</div>
        </div>
    </div>
    <div style="width: 98%;margin-left: 1%;">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="模型台账" name="first">
                <div style="width: 100%;border: rgb(221.7, 222.6, 224.4) solid 1px;" :style="{'height':heightAll*0.2+'px'}">
                    <div style="display: flex;">
                        <div style="background-color: rgb(243.9, 244.2, 244.8);border:  solid 1px;display: flex;align-items: center;width: 10%;justify-content: center;border-color: transparent rgb(221.7, 222.6, 224.4) rgb(221.7, 222.6, 224.4) transparent;" :style="{'height':heightAll*0.2/4+'px'}">
                            模型服务:
                        </div>
                        <div style="width: 90%;border:  solid 1px;border-color: transparent transparent rgb(221.7, 222.6, 224.4) transparent;display: flex;align-items: center;justify-content: flex-start;">
                            <el-button text type="primary">全部</el-button>
                            <div style="font-size: 14px;">
                                新安江模型服务
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                维水动力模型服务
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                二维水动力模型服务
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                智能模型服务
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                外部共享服务
                            </div>
                            <div style="margin-left: auto">
                                <el-button type="primary" text>
                                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div style="background-color: rgb(243.9, 244.2, 244.8);border:  solid 1px;display: flex;align-items: center;width: 10%;justify-content: center;border-color: transparent rgb(221.7, 222.6, 224.4) rgb(221.7, 222.6, 224.4) transparent;" :style="{'height':heightAll*0.2/4+'px'}">
                            服务类型:
                        </div>
                        <div style="width: 90%;border:  solid 1px;border-color: transparent transparent rgb(221.7, 222.6, 224.4) transparent;display: flex;align-items: center;justify-content: flex-start;">
                            <el-button text type="primary">全部</el-button>
                            <div style="font-size: 14px;">
                                REST
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                Web Service
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                REST-3D
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                REST DATA
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                3DTILES SOAP
                            </div>
                            <div style="margin-left: auto">
                                <el-button type="primary" text>
                                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div style="background-color: rgb(243.9, 244.2, 244.8);border:  solid 1px;display: flex;align-items: center;width: 10%;justify-content: center;border-color: transparent rgb(221.7, 222.6, 224.4) rgb(221.7, 222.6, 224.4) transparent;" :style="{'height':heightAll*0.2/4+'px'}">
                            开发单位:
                        </div>
                        <div style="width: 90%;border:  solid 1px;border-color: transparent transparent rgb(221.7, 222.6, 224.4) transparent;display: flex;align-items: center;justify-content: flex-start;">
                            <el-button text type="primary">全部</el-button>
                            <div style="margin-left: auto">
                                <el-button type="primary" text>
                                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div style="background-color: rgb(243.9, 244.2, 244.8);border:  solid 1px;display: flex;align-items: center;width: 10%;justify-content: center;border-color: transparent rgb(221.7, 222.6, 224.4) rgb(221.7, 222.6, 224.4) transparent;" :style="{'height':heightAll*0.2/4+'px'}">
                            计算原理:
                        </div>
                        <div style="width: 90%;border:  solid 1px;border-color: transparent transparent rgb(221.7, 222.6, 224.4) transparent;display: flex;align-items: center;justify-content: flex-start;">
                            <el-button text type="primary">全部</el-button>
                            <div style="font-size: 14px;">
                                数学机理
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                经验模型
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                机器学习
                            </div>
                            <div style="font-size: 14px;margin-left: 1%;">
                                深度学习
                            </div>
                            <div style="margin-left: auto">
                                <el-button type="primary" text>
                                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="专业工具" name="second">
                
            </el-tab-pane>
        </el-tabs>
        <div style="margin-top: 3%;display: flex;">
            <el-card style="width: 25%;" :style="{'height':heightAll*0.33+'px'}">
                <div><img style="width: 100%;" src="/public/sourceBt1.png" alt="Logo"></div>
                <div style="display: flex;align-items: center;">
                    <div style="font-size: 20px;font-weight: bold;margin-left: 1%;margin-top: 1%;">
                        HBV-二维水动力模型
                    </div>
                    <div style="margin-left: auto;">
                        <el-button type="primary" text>
                        查看<el-icon class="el-icon--right"><Right /></el-icon>
                        </el-button>
                    </div>
                </div>
                <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
                    <div style="font-weight: bold;">发单位:</div>
                    <div>水利部</div>
                    <div style="margin-left: auto;display: flex;">
                        <div style="font-weight: bold;">使用单位:</div>
                        <div>7家</div>
                    </div>
                </div>
                <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
                    <div style="font-weight: bold;">上线时间:</div>
                    <div>2023年5月</div>
                </div>
            </el-card>
            <el-card style="width: 25%;margin-left: 1%;" :style="{'height':heightAll*0.33+'px'}">
                <div><img style="width: 100%;" src="/public/sourceBt2.png" alt="Logo"></div>
                <div style="display: flex;align-items: center;">
                    <div style="font-size: 20px;font-weight: bold;margin-left: 1%;margin-top: 1%;">
                        一维水动力模型
                    </div>
                    <div style="margin-left: auto;">
                        <el-button type="primary" text>
                        查看<el-icon class="el-icon--right"><Right /></el-icon>
                        </el-button>
                    </div>
                </div>
                <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
                    <div style="font-weight: bold;">发单位:</div>
                    <div>水利部</div>
                    <div style="margin-left: auto;display: flex;">
                        <div style="font-weight: bold;">使用单位:</div>
                        <div>7家</div>
                    </div>
                </div>
                <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
                    <div style="font-weight: bold;">上线时间:</div>
                    <div>2023年5月</div>
                </div>
            </el-card>
            <el-card style="width: 25%;margin-left: 1%;" :style="{'height':heightAll*0.33+'px'}">
                <div><img style="width: 100%;" src="/public/sourceBt3.png" alt="Logo"></div>
                <div style="display: flex;align-items: center;">
                    <div style="font-size: 20px;font-weight: bold;margin-left: 1%;margin-top: 1%;">
                        新安江模型
                    </div>
                    <div style="margin-left: auto;">
                        <el-button type="primary" text>
                        查看<el-icon class="el-icon--right"><Right /></el-icon>
                        </el-button>
                    </div>
                </div>
                <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
                    <div style="font-weight: bold;">发单位:</div>
                    <div>水利部</div>
                    <div style="margin-left: auto;display: flex;">
                        <div style="font-weight: bold;">使用单位:</div>
                        <div>7家</div>
                    </div>
                </div>
                <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
                    <div style="font-weight: bold;">上线时间:</div>
                    <div>2023年5月</div>
                </div>
            </el-card>
            <el-card style="width: 25%;margin-left: 1%;" :style="{'height':heightAll*0.33+'px'}">
                <div><img style="width: 100%;" src="/public/sourceBt4.png" alt="Logo"></div>
                <div style="display: flex;align-items: center;">
                    <div style="font-size: 20px;font-weight: bold;margin-left: 1%;margin-top: 1%;">
                        API模型
                    </div>
                    <div style="margin-left: auto;">
                        <el-button type="primary" text>
                        查看<el-icon class="el-icon--right"><Right /></el-icon>
                        </el-button>
                    </div>
                </div>
                <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
                    <div style="font-weight: bold;">发单位:</div>
                    <div>水利部</div>
                    <div style="margin-left: auto;display: flex;">
                        <div style="font-weight: bold;">使用单位:</div>
                        <div>7家</div>
                    </div>
                </div>
                <div style="display: flex;margin-top: 1%;font-size: 14px;width: 98%;margin-left: 1%;color: rgb(115.2, 117.6, 122.4);">
                    <div style="font-weight: bold;">上线时间:</div>
                    <div>2023年5月</div>
                </div>
            </el-card>
        </div>
    </div>
  </div>
</template>
<script   setup>
import { ref, onMounted } from 'vue';
import {
  ArrowLeft,
  Plus
} from '@element-plus/icons-vue'
import { reactive } from 'vue'
const dialogVisible = true
const form = reactive({
  name: '',
  region: '',
  date: '',
})

const checkGroup = [
    {label:'水文预报'},
    {label:'维水动力'},
    {label:'二维水动力'},
    {label:'机器学习'},
]
const activeName = 'first'
const heightAll = window.innerHeight
const valueHelpSel = '';
const tableheight = window.innerHeight*0.7
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
function showNode(data, node){
  console.log(data,node)
}
</script>
<style scoped lang="scss">
.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
</style>