choozmo
/
marketing_cal


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
</head>
<body class="color__grey">
    <div id='app'>
        <nav class="navbar navbar-dark sticky-top flex-md-nowrap p-2">
            <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">行銷日曆</a>
          </nav>
          <div class="container-fluid">
            <div class="row">
              <nav class="col-md-2 d-none d-md-block bg-light sidebar">
                <div class="sidebar-sticky">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="fas fa-comment-dots"></i>
                        近一季行銷建議
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="fas fa-users"></i>
                        客群瀏覽
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        <i class="fas fa-quote-left"></i>
                        關鍵字建議
                      </a>
                    </li>
                  </ul>
                </div>
              </nav>
        
              <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
                  <h1 class="h2">近一季行銷建議</h1>
                  <div class="d-flex">
                    <span>季數</span>
                    <select class="custom-select" v-model='selected'>
                        <option value="0">Q1</option>
                        <option value="1">Q2</option>
                        <option value="2">Q3</option>
                        <option value="3">Q4</option>
                    </select>
                </div>
                </div>
                <div class="table-responsive mb-3" v-for="(month, i) in month" :key="i" v-if='selected == i'>
                  <table class="table">
                    <thead>
                      <tr>
                        <td>客群</td>
                        <th scope="col" width='320'>{{ month[0] }}</th>
                        <th scope="col" width='320'>{{ month[1] }}</th>
                        <th scope="col" width='320'>{{ month[2] }}</th>
                      </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item ,k) in user_groups">
                            <th>客群-{{ item.group_chinese_name }}</th>
                            <td v-for="t in item.trends[i]">
                                <button type="button" class="btn__kw" data-toggle="modal" data-target="#exampleModalCenter" @click.prevent="showModal(item.suggests)">關鍵字</button>
                                
                                    <div class="highTrend dark-1 p-2 mt-2" v-if="check(t.times, item)">Popular</div>
                                
                            </td>
                        </tr>
                    </tbody>
                  </table>
                </div>
              </main>
            </div>
          </div>
          <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header border-0">
                  <h5 class="modal-title" id="exampleModalLongTitle">關鍵字群</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <div>
                        <template v-for="word in tempkeywords">
                            <span class="badge badge-warning">{{ word }}</span>
                        </template>
                    </div>
                </div>
                <div class="modal-footer border-0">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
                </div>
              </div>
            </div>
          </div>
    </div>
    <!-- <footer class="footer text-center p-4 bg-white">
        <div class="text-muted"> © 2021 Copyright: Googo Website Traffic</div>
      </footer> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
    <script src="vuedata.js"></script>
</body>
</html>