kylx365
/
miaoguo_system_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>秒过资料库管理</title>
    <link rel="stylesheet" href="./mg/common.css">
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="js/vue.js"></script>
    <style type="text/css">

        .container {
            width:98%;
            margin: 0 20px 0 20px;
        }

        #app {
            margin: 0 auto;
            font-size: 18px;
        }

        .panelTop{
            width:100%;
            height:50px;
            justify-content: flex-start;
        }

        .panelTop button{
            margin:5px 0 0 10px;
        }

        .panelMain {
            width: 100%;
            border:1px solid #eee;
            margin-top: 5px;
            align-items: flex-start;
        }

        .mainMenu{
            border:1px solid #eee;
            min-height:400px;
            justify-content: flex-start;
        }

        .menuItem{
            width:92%;
            background-color: #eee;
            margin-top: 2px;
            line-height:40px;
            cursor: pointer;
            padding:0 15px;
        }

        .main{
            flex:1;
            min-height:400px;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .mainTop{
            background-color: #eee;
            margin: 20px 0 0 20px;
        }
        .mainItem{
            justify-content: flex-start;
            margin: 20px 0 0 20px;
        }

        .key{
            margin:0 10px;
        }

        input{
            max-width: 600px;
            min-width:50px;
        }

    </style>
    <script>

        var vm;
        $(document).ready(function () {
            vm = new Vue({
                el: '#app',
                data: {
                    MenuList: [],
                    List:[],
                    CHN:{},
                    ENG:{},
                },
                methods: {
                    getMenuList: function (event) {
                        var word=$("#txtWord").val();
                        $.get("/api/getLiteracyWordList?Word="+word, function (data) {
                            var arr = [];
                            arr = data.result;
                            vm.MenuList = arr;

                        });

                    },
                    getMenuItem: function (event) {
                        var id = event.currentTarget.dataset.id;
                        $.get("/api/getLiteracyWordInfo?ID="+id, function (data) {
                            var arr = [];
                            var info = data.result.JSONString;
                            info=JSON.parse(info);
                            if (info.List) {
                                vm.List = info.List;
                            }
                            else{
                                vm.CHN=info.CHN;
                                vm.ENG=info.ENG;
                                vm.List=[];
                            }
                        });

                    },

                }
            });
        });

    </script>
</head>
<body>
<body class="container">
    <div id="app">
        <div class="panelTop FlexRow">
            <div>关键词：</div>
            <div><input type="text" id="txtWord" value="水调歌头" /> </div>
            <button v-on:click="getMenuList">查询</button>
        </div>
        <div class="panelMain FlexRow">
            <div class="mainMenu FlexColumn">
                <div class="menuItem" v-for="(item, index) in MenuList" v-on:click="getMenuItem" :data-id="item.ID">
                    {{item.Word}}
                </div>
            </div>
            <div class="main FlexColumn" v-if="List.length>0">
                <div class="mainTop">列表</div>
                <div class="mainItem FlexRow" v-for="(item, index) in List">
                    <div v-for="(item1,key,index1) in item">
                        <span class="key">{{key}}</span>
                        <span><input type="text" :value="item1" /></span>
                    </div>
                </div>
            </div>
            <div class="main FlexColumn" v-if="CHN || ENG">
                <div class="mainTop">中文</div>
                <div class="mainItem FlexRow" v-for="(item,key,index) in CHN">
                    <span class="key">{{key}}</span>

                    <template v-if="item.length>0">
                        <span><input type="text" :value="item" :style=" 'width:' + item.length +'px;'"/></span>
                    </template>
                    <template v-if="item.length==0">
                        <span><input type="text" :value="item" :style=" 'width:' + item.length +'px;'"/></span>
                    </template>


                </div>

                <div class="mainTop">英文</div>
                <div class="mainItem FlexRow" v-for="(item,key,index) in ENG">
                    <span class="key">{{key}}</span>
                    <template v-if="item.length>0">
                        <span><input type="text" :value="item" :style=" 'width:' + item.length +'px;'" /></span>
                    </template>
                    <template v-if="item.length==0">
                        <span><input type="text" :value="item" :style=" 'width:' + item.length +'px;'"/></span>
                    </template>

                </div>
            </div>
        </div>
    </div>
</body>
</html>