OI-Master-chat
/
index.html

<!DOCTYPE html>
<html>

<head>
    <title>OI-MasterChat</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/socket.io@3.0.1/client-dist/socket.io.min.js" integrity="sha256-uP3zF7q0QGcWgbXJogFTc6WCvKIKEnFyGHYHehDrbJ0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/theme-chalk/index.css" integrity="sha256-bHcFRzLiKH6f01ebzmMYw8hJlYauysooMBDoZEKOrhQ=" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/index.js" integrity="sha256-9g2BaTDUFdb2pl0mwmaSGAboTuftmuan8jYmfyCwRtk=" crossorigin="anonymous"></script>
    <script src="/js/main.js"></script>
    <link rel="shortcut icon" href="/favicon.ico">
</head>

<body>
    <!-- <div class="head">Fork Me On <a href="https://gitee.com/OI-Master/chat"
			style="color:red;text-decoration:none;font-weight:bold;">Gitee</a></div>
	<br><br>
	<ul id="messages"></ul>
	<br><br>
	<form action="">
		<input id="m" autocomplete="off">
		<button>Send</button>
	</form> -->
    <div id="app">
        <transition name="el-fade-in-linear">
            <div class="aside" v-show="!drawer">
                <div class="settings" @click="drawer=!drawer">
                    <i class="el-icon-setting"></i>
                </div>
            </div>
        </transition>
        <el-row>
            <el-col :span="24">
                <el-container :class="">
                    <el-header>
                        <div class="head">&nbsp;<a style="color:lightgray;font-weight:bold;float:left;text-decoration:none;" href="/">OI-MasterChat</a><span style="float:right;"><a style="color:white;text-decoration:none;" href="/readme.html">玩法</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;Fork Me On <a href="https://gitee.com/OI-Master/chat" style="color:red;text-decoration:none;font-weight:bold;">Gitee</a>&nbsp;</span></div>
                    </el-header>
                    <el-main>
                        <el-row v-for="(item, i) in msgs" :rid="i">
                            <el-avatar :title="item.un" v-if="item.un">{{ item.un }}</el-avatar>
                            <a :style="'font-size:15px;color:' + item.namecolor +  ' ;'" v-if="item.namecolor">&nbsp;&nbsp;{{ item.un }}:</a>
                            <a v-if="item.music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 :src="'https://music.163.com/outchain/player?type=2&id=' + item.music + '&auto=1&height=66'"></iframe></a>
                            <a v-if="item.video"><iframe width="100%" height="100%" :src="'//player.bilibili.com/player.html?aid=710349570&bvid='+ item.video" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></a>
                            <a :style="'color:' + item.color +  ' ;'" v-if="!item.music">{{ item.message }}</a>
                            <el-divider v-if="!item.un">{{ item }}</el-divider>
                        </el-row>
                    </el-main>
                    <el-footer>
                        <el-row>
                            <el-input type="textarea" :autofocus="true" :rows="2" placeholder="请输入内容，Ctrl+Enter发送" v-model="text" @keyup.ctrl.enter.native="send">
                            </el-input>
                        </el-row>
                    </el-footer>
                </el-container>
            </el-col>
        </el-row>
        <el-drawer title="设置" :visible.sync="drawer" :before-close="handleClose">
            <el-row>
                <el-col :span="24">
                    昵称：
                    <el-input placeholder="昵称" suffix-icon="el-icon-user" v-model="username">
                    </el-input>
                    <br/><br/>
                    文字颜色：
                    <el-color-picker v-model="color" style="padding-top: 10px; width: 100%;"></el-color-picker>
                    <br/><br/>
                    昵称颜色：
                    <el-color-picker v-model="namecolor" style="padding-top: 10px; width: 100%;"></el-color-picker>
                    <br/><br/>
                    <el-button type="danger" @click="cls">清屏</el-button><el-button type="danger" @click="clearall">重置设置</el-button>
                </el-col>
            </el-row>
        </el-drawer>
    </div>
</body>

</html>