CocoClass-help/components/ContentCard.vue

<template>
    <div class="content-card">
        <!-- 新手入门 -->
        <div class="content-card-item">
            <h1>新手入门</h1>
            <div class="content-card-item-card">
                <el-card style="width:48%;background-color: #E3F8F4;" shadow="hover">
                    <span>平台概述 <el-icon>
                            <ArrowRight />
                        </el-icon></span>
                    <p>介绍平台功能，相关功能都有登录、注册、GPT模型等,说明文字说明文字说明文字说明文字说明文字说明文字</p>
                    <img class="clearfix Introduction_img" :src="pingtai" alt="">
                </el-card>
                <el-card style="width:48%;background-color: #E2EEFF;" shadow="hover">
                    <span>用户登录 <el-icon>
                            <ArrowRight />
                        </el-icon></span>
                    <p>说明文字说明文字说明文字说明文字说明文字说明文字,说明文字说明文字说明文字说明文字说明文字说明文字</p>
                    <img class="clearfix Introduction_img" :src="userLogin" alt="">
                </el-card>
            </div>
        </div>
        <!-- 平台使用 -->
        <div class="content-card-item">
            <h1>平台使用</h1>
            <div class="content-card-item-card platform_use">
                <h2 style="width: 100%;">基础使用</h2>
                <el-card style="width:30%;" shadow="hover">
                    <span><img :src="courseImg" alt="创建课程">创建课程</span>
                    <p>介绍平台功能，相关功能都有登录、注册、GPT模型等,说明文字说明文字说明文字说明文字说明文字说明文字</p>
                </el-card>
                <el-card style="width:30%;" shadow="hover">
                    <span><img :src="shishiImg" alt="实施课程">实施课程</span>
                    <p>说明文字说明文字说明文字说明文字说明文字说明文字,说明文字说明文字说明文字说明文字说明文字说明文字</p>
                </el-card>
                <el-card style="width:30%;" shadow="hover">
                    <span><img :src="xiangmu" alt="创建项目">创建项目</span>
                    <p>说明文字说明文字说明文字说明文字说明文字说明文字,说明文字说明文字说明文字说明文字说明文字说明文字</p>
                </el-card>
            </div>
            <div class="content-card-item-card platform_use" style="margin-top: 32px;">
                <h2 style="width: 100%;">进阶使用</h2>
                <el-card style="width:30%;" shadow="hover">
                    <span><img :src="xietongImg" alt="协同建构">协同建构</span>
                    <p>介绍平台功能，相关功能都有登录、注册、GPT模型等,说明文字说明文字说明文字说明文字说明文字说明文字</p>
                </el-card>
                <el-card style="width:30%;" shadow="hover">
                    <span><img :src="zhushouImg" alt="AI助手">AI助手</span>
                    <p>说明文字说明文字说明文字说明文字说明文字说明文字,说明文字说明文字说明文字说明文字说明文字说明文字</p>
                </el-card>
                <el-card style="width:30%;" shadow="hover">
                    <span><img :src="AIchuangjianImg" alt="AI创建">AI创建</span>
                    <p>说明文字说明文字说明文字说明文字说明文字说明文字,说明文字说明文字说明文字说明文字说明文字说明文字</p>
                </el-card>
            </div>
        </div>
        <!-- 更多资源 -->
        <div class="content-card-item">
            <h1>更多资源</h1>
            <div class="content-card-item-card">
                <el-card style="width:48%;background-color: #E3F8F4;" shadow="hover">
                    <span>课程案例</span>
                    <ul>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                    </ul>
                </el-card>
                <el-card style="width:48%;background-color: #E2EEFF;" shadow="hover">
                    <span>项目案例</span>
                    <ul>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                        <li>
                            <b>.</b>
                            案例名称
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </li>
                    </ul>
                </el-card>
            </div>
            <div class="content-card-item-card platform_use" style="background-color: #E2EEFF;margin-top: 20px;">
                <el-card style="width:30%;" shadow="hover">
                    <div class="content-card-item-card-img">
                        <div>
                            <h4>常见问题</h4>
                            <p>如何与AI对话如何与AI对话如何与AI对话如何与AI对话</p>
                        </div>
                        <img :src="wentiImg" alt="常见问题">
                    </div>
                </el-card>
                <el-card style="width:30%;" shadow="hover">
                    <div class="content-card-item-card-img">
                        <div>
                            <h4>更新日志</h4>
                            <p>如何与AI对话如何与AI对话如何与AI对话如何与AI对话</p>
                        </div>
                        <img :src="logImg" alt="更新日志">

                    </div>
                </el-card>
                <el-card style="width:30%;" shadow="hover">
                    <div class="content-card-item-card-img">
                        <div>
                            <h4>如何与AI对话</h4>
                            <p>如何与AI对话如何与AI对话如何与AI对话如何与AI对话</p>
                        </div>
                        <img :src="AIduihuaImg" alt="如何与AI对话">

                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>
<script>
import pingtai from '../assets/img/平台概述.png';
import userLogin from '../assets/img/user_login.png';
import xiangmu from '../assets/img/创建项目.png';
import courseImg from '../assets/img/创建课程.png';
import shishiImg from '../assets/img/实施课程.png';
import xietongImg from '../assets/img/协同建构.png';
import zhushouImg from '@/assets/img/AI助手.png';
import AIchuangjianImg from '@/assets/img/AI创建.png';
import wentiImg from '@/assets/img/常见问题.png';
import logImg from '@/assets/img/更新日志.png';
import AIduihuaImg from '@/assets/img/AI对话.png';

export default {
    name: 'ContentCard',
    data() {
        return {
            pingtai,
            userLogin, xiangmu, courseImg, shishiImg, AIchuangjianImg, zhushouImg, xietongImg,
            AIduihuaImg, logImg, wentiImg
        }
    }
}

</script>
<style lang="less">
.content-card {
    .content-card-item {
        margin-top: 80px;

        h1 {
            color: #000;
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 24px;
        }

        .content-card-item-card {
            display: flex;
            justify-content: space-between;
            text-align: left;
            flex-wrap: wrap;

            .el-card {
                padding: 32px;
                position: relative;
                border-radius: 8px;

                span {
                    font-size: 24px;
                    color: #000;
                    font-weight: 600;
                    line-height: 32px;

                    .el-icon {
                        width: 24px;
                        position: relative;
                        top: 3px;
                        color: rgba(0, 0, 0, 0.26);
                    }
                }

                p {
                    width: 80%;
                    font-size: 14px;
                    line-height: 22px;
                    margin-top: 8px;
                }

                .Introduction_img {
                    float: right;
                }

                ul {
                    padding: 5px 15px;

                    li {
                        padding: 8px 4px 8px 17px;
                        font-size: 14px;
                        cursor: pointer;
                        position: relative;

                        b {
                            position: absolute;
                            top: 0px;
                            left: 5px;
                            font-size: 20px
                        }

                        .el-icon {
                            position: absolute;
                            right: 5px;
                            top: 10px;
                        }
                    }

                    li:hover {
                        background-color: #fff;
                        border-radius: 8px;
                    }
                }

                .content-card-item-card-img{
                    display: flex;
                }
            }
        }

        .platform_use {
            padding: 32px;
            background-color: #E2EEFF;
            border: 1px solid #E2EEFF;
            border-radius: 10px;

            h2 {
                font-size: 24px;
                color: #000;
                line-height: 32px;
                font-weight: 600;
                margin-bottom: 24px;
            }

            .el-card {
                padding: 24px;

                .el-card__body {
                    padding: 0;

                    span {
                        font-size: 18px;
                        color: #000;
                        font-weight: 600;
                        line-height: 24px;

                        img {
                            width: 24px;
                            height: 24px;
                            vertical-align: middle;
                            margin-right: 8px;
                        }
                    }

                    h4 {
                        font-size: 18px;
                        font-weight: 600;
                        line-height: 26px;
                    }
                }

            }
        }
    }
}
</style>