1245 lines
74 KiB
Plaintext
1245 lines
74 KiB
Plaintext
@*
|
||
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
|
||
*@
|
||
@{
|
||
Layout = "_LooperLayout";
|
||
}
|
||
@section Script {
|
||
<script src="~/assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
|
||
<script src="~/assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
|
||
<script src="~/assets/vendor/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
|
||
<script src="~/assets/javascript/pages/dataTables.bootstrap.js"></script>
|
||
<script src="~/assets/javascript/custom/kollist.js" asp-append-version="true"></script>
|
||
|
||
}
|
||
<!-- .page-inner -->
|
||
<div class="page-inner">
|
||
<!-- .page-title-bar -->
|
||
<header class="page-title-bar">
|
||
<!-- .breadcrumb -->
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item active">
|
||
<a href="#"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>KOL清單</a>
|
||
</li>
|
||
</ol>
|
||
</nav><!-- /.breadcrumb -->
|
||
<!-- title -->
|
||
<h1 class="page-title"> KOL清單 </h1>
|
||
<p class="text-muted"> </p><!-- /title -->
|
||
</header><!-- /.page-title-bar -->
|
||
|
||
|
||
<div class="page-section">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<!-- #accordion2 -->
|
||
<div id="accordion1" class="card-expansion">
|
||
<!-- .card -->
|
||
<div class="card card-expansion-item expanded">
|
||
<div class="card-header border-0" id="headingOne1">
|
||
<button id="adv-search-btn" class="btn btn-reset d-flex justify-content-between w-100" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1"><span>進階搜尋</span> <span class="collapse-indicator"><i class="fa fa-fw fa-chevron-down"></i></span></button>
|
||
</div>
|
||
<div>
|
||
<div id="collapseOne1" class="collapse" aria-labelledby="headingOne1" data-parent="#accordion1">
|
||
<div class="card-body pt-0">
|
||
<div class="col-md-12" id="kolMedia2_div">
|
||
<div class="form-group">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12" id="kolMakeup2_div">
|
||
<div class="form-group">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12" id="kolStyle2_div">
|
||
<div class="form-group">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12" id="kolFansType2_div">
|
||
<div class="form-group">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="form-group">
|
||
<label for="kol_tags2">合作過產品類型</label> <select type="text" id="kol_tags2" class="form-control"></select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<button type="button" id="filiterBtn" class="btn btn-primary">篩選</button>
|
||
<button type="button" id="resetBtn" class="btn btn-danger">重設</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- .page-section -->
|
||
<div class="page-section">
|
||
<button type="button" id="kolNewModal" class="btn btn-primary btn-floated" title="Add new client"><i class="fa fa-plus"></i></button>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- .card -->
|
||
<div class="card card-fluid">
|
||
<!-- .card-body -->
|
||
<div class="card-body">
|
||
<!-- .table -->
|
||
<table id="dt-responsive" class="table dt-responsive nowrap w-100">
|
||
<thead>
|
||
<tr>
|
||
<th> 相片 </th>
|
||
<th> 名稱 </th>
|
||
<th> 組成類型 </th>
|
||
<th> 聯絡方式1 </th>
|
||
<th> 合作過類型 </th>
|
||
<th> 最後修改時間 </th>
|
||
<th> </th>
|
||
</tr>
|
||
</thead>
|
||
|
||
</table><!-- /.table -->
|
||
</div><!-- /.card-body -->
|
||
</div><!-- /.card -->
|
||
</div><!-- /.page-section -->
|
||
</div><!-- /.page-inner -->
|
||
|
||
<!-- Keep in mind that modals should be placed outsite of page sidebar -->
|
||
<!-- .modal -->
|
||
<form id="clientNewForm" name="clientNewForm">
|
||
<div class="modal fade" id="clientNewModal" tabindex="-1" role="dialog" aria-labelledby="clientNewModalLabel" data-backdrop="static"
|
||
data-keyboard="false" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog modal-lg" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="clientNewModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">Client name</span> <input id="modelTitle" type="text" class="form-control form-control-lg" placeholder="KOL 資料維護" required="">
|
||
</h6>
|
||
<button type="button" class="close" data-dismiss="modal">
|
||
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||
</button>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<input type="hidden" id="method" />
|
||
<input type="hidden" id="kol_uid" />
|
||
<!-- .form-row -->
|
||
<div class="form-row">
|
||
|
||
|
||
<div class="col-md-12" id="user_name_div">
|
||
<div class="form-group">
|
||
<label for="user_name">KOL頻道名稱</label> <input type="text" id="kol_name" class="form-control">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12" id="user_id_div">
|
||
<div class="form-group">
|
||
<label for="tf6">KOL介紹</label>
|
||
<textarea class="form-control" id="kol_descript" rows="5"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="form-group">
|
||
<label for="kol_contact1">聯繫方式1</label> <input type="text" id="kol_contact1" class="form-control">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="form-group">
|
||
<label for="kol_contact2">聯繫方式2</label> <input type="text" id="kol_contact2" class="form-control">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12" id="kolMakeup_div">
|
||
<div class="form-group">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12" id="kolStyle_div">
|
||
<div class="form-group">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12" id="kolFansType_div">
|
||
<div class="form-group"></div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<label class="control-label" for="kol_men_ratio">男女比</label> <input type="text" value="50" id="kol_men_ratio" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-prefix="男" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label class="control-label" for="kol_women_ratio"> </label> <input type="text" value="50" id="kol_women_ratio" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-prefix="女" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
</div>
|
||
<div class="form-group"></div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="control-label" for="kol_13_17">13-17歲占比</label>
|
||
<input type="text" value="0" id="kol_13_17" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="control-label" for="kol_18_24">18-24歲占比</label>
|
||
<input type="text" value="0" id="kol_18_24" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="control-label" for="kol_25_34">25-34歲占比</label>
|
||
<input type="text" value="0" id="kol_25_34" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="control-label" for="kol_35_44">35-44歲占比</label>
|
||
<input type="text" value="0" id="kol_35_44" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="control-label" for="kol_45_54">45-54歲占比</label>
|
||
<input type="text" value="0" id="kol_45_54" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="control-label" for="kol_55_64">55-64歲占比</label>
|
||
<input type="text" value="0" id="kol_55_64" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="control-label" for="kol_65">65歲以上占比</label>
|
||
<input type="text" value="0" id="kol_65" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="card-body">
|
||
<!-- .media -->
|
||
<div class="media">
|
||
<div class="user-avatar user-avatar-xxl fileinput-button">
|
||
<div class="fileinput-button-label"> Change photo </div><img src="~/assets/images/avatars/unknown-profile.jpg" alt=""> <input id="fileupload-avatar" type="file" name="avatar">
|
||
</div>
|
||
<div class="media-body pl-3">
|
||
<h3 class="card-title"> KOL 照片 </h3>
|
||
<p class="card-text"> 點擊頭像可更換照片. </p>
|
||
<p class="card-text text-muted"> 最大容許檔案大小為 5MB. </p>
|
||
</div>
|
||
</div><!-- /.media -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<!-- .card-body -->
|
||
<div class="card-body">
|
||
<h2 class="card-title"> 社群平台 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="media_table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 10%;"> 平台 </th>
|
||
<th style="width: 25%;"> 網址 </th>
|
||
<th style="width: 12%;"> 帳號 </th>
|
||
<th style="width: 12%;"> 名稱 </th>
|
||
<th> 粉絲數</th>
|
||
<th style="width: 18%;"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> Instagram </td>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
<td class="align-middle"> zamy_ding </td>
|
||
<td class="align-middle"> 奎丁 </td>
|
||
<td class="align-middle"> 754000 </td>
|
||
<td class="align-middle text-right">
|
||
<button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
</div><!-- /.card-body -->
|
||
<!-- .card-footer -->
|
||
<div class="card-footer">
|
||
<a href="javascript: void();" id="socialNewBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增社群平台資料</a>
|
||
</div><!-- /.card-footer -->
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="form-group">
|
||
<label for="kol_tags">合作過產品類型</label> <select type="text" id="kol_tags" class="form-control"></select>
|
||
</div>
|
||
</div>
|
||
</div><!-- /.form-row -->
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" id="kolSaveBtn" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
|
||
|
||
<!-- .modal -->
|
||
<form id="clientSocialEditForm" name="clientSocialEditForm">
|
||
<div class="modal fade" id="socialItemModal" tabindex="-1" role="dialog" aria-labelledby="socialModalLabel" data-backdrop="static" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="socialModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">項目名稱</span> <input id="option_name" type="text" class="form-control form-control-lg" value="" placeholder="項目名稱" readonly="readonly " required="">
|
||
</h6>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<input type="hidden" id="media_method" />
|
||
<input type="hidden" id="option_uid" />
|
||
<input type="hidden" id="optionItem_uid" />
|
||
<input type="hidden" id="kolMedia_uid" />
|
||
<div class="form-group">
|
||
<label for="cnCountry"> 社群平台 </label> <select id="media_select" class="custom-select d-block w-100">
|
||
<option value=""> Choose... </option>
|
||
|
||
</select>
|
||
</div>
|
||
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolMedia_url" class="form-control" value="" placeholder="網址" maxlength="50" required=""> <label for="kolMedia_url">網址</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolMedia_accountName" class="form-control" value="" placeholder="社群帳號" maxlength="20" required=""> <label for="kolMedia_accountName">社群帳號</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolMedia_displayName" class="form-control" value="" placeholder="社群名稱" maxlength="20" required=""> <label for="kolMedia_displayName">社群名稱</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolMedia_fansNum" class="form-control" value="0" placeholder="追蹤訂閱數" maxlength="20" required=""> <label for="kolMedia_fansNum">粉絲數</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" id="optionItemDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
|
||
|
||
<!-- .modal -->
|
||
<form id="clientProjectForm" name="clientProjectForm">
|
||
<div class="modal fade" id="clientProjectModal" tabindex="-1" role="dialog" aria-labelledby="clientProjectFormLabel" data-backdrop="static"
|
||
data-keyboard="false" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog modal-xl" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="clientNewModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">Client name</span> <input id="modelTitle" type="text" class="form-control form-control-lg" placeholder="洽談與合作案件" required="">
|
||
</h6>
|
||
<button type="button" class="close" data-dismiss="modal">
|
||
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||
</button>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
|
||
<input type="hidden" id="kolProject_kol_uid" />
|
||
<!-- .page-section -->
|
||
<div class="page-section">
|
||
<button type="button" id="kolProjectNewBtn" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
|
||
<!-- .card -->
|
||
<div class="card card-fluid">
|
||
<!-- .card-body -->
|
||
<div class="card-body">
|
||
<!-- .table -->
|
||
<table id="dt-responsive-kolProject" class="table dt-responsive nowrap w-100">
|
||
<thead>
|
||
<tr>
|
||
<th> 專案名稱 </th>
|
||
<th> 狀態 </th>
|
||
<th> 評價 </th>
|
||
<th> 填寫人 </th>
|
||
<th> 資料異動時間 </th>
|
||
<th> </th>
|
||
</tr>
|
||
</thead>
|
||
|
||
</table><!-- /.table -->
|
||
</div><!-- /.card-body -->
|
||
</div><!-- /.card -->
|
||
</div><!-- /.page-section -->
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer" style="display: none;">
|
||
<button type="button" id="kolSaveBtn" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
|
||
|
||
<!-- .modal -->
|
||
<form id="clientNewKolProjectForm" name="clientNewKolProjectForm">
|
||
<div class="modal fade" id="clientNewKolProjectModal" tabindex="-1" role="dialog" aria-labelledby="clientNewKolProjectLabel" data-backdrop="static"
|
||
data-keyboard="false" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog modal-lg" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="clientNewModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">Client name</span> <input id="modelTitle" type="text" class="form-control form-control-lg" placeholder="項目合作資料" required="">
|
||
</h6>
|
||
<button type="button" class="close" data-dismiss="modal">
|
||
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||
</button>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<input type="hidden" id="kolProject_method" />
|
||
<input type="hidden" id="kolProject_uid" />
|
||
<!-- .form-row -->
|
||
<div class="form-row">
|
||
<div class="col-md-12" id="project_year_month_div">
|
||
<div class="row">
|
||
<div class="col-md-2" id="user_name_div">
|
||
<div class="form-group">
|
||
<label for="project_year">年度</label>
|
||
<select class="custom-select" id="project_year" required="">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2" id="user_id_div">
|
||
<div class="form-group">
|
||
<label for="project_month">月份</label>
|
||
<select class="custom-select" id="project_month" required="">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-8">
|
||
<div class="form-group">
|
||
<label for="project_name">專案名稱</label>
|
||
<select class="custom-select" id="project_select" required="">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</<div>
|
||
<div class="card-footer"> </div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-12" id="cooperateType_div">
|
||
<div class="form-group">
|
||
</div>
|
||
<div class="card-footer"> </div>
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<h2 class="card-title"> 報價 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="price_table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 10%;"> 合作平台 </th>
|
||
<th style="width: 30%;"> 規格 </th>
|
||
<th style="width: 10%; text-align: right;"> 數量 </th>
|
||
<th style="width: 10%; text-align: right;"> 報價 </th>
|
||
<th> 報價日期</th>
|
||
<th style="width: 18%;"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> Instagram </td>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
<td class="align-middle"> zamy_ding </td>
|
||
<td class="align-middle"> 奎丁 </td>
|
||
<td class="align-middle"> 754000 </td>
|
||
<td class="align-middle text-right">
|
||
<button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
<!-- .card-footer -->
|
||
<div class="card-footer">
|
||
<a href="javascript: void();" id="addSpecBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增報價資料</a>
|
||
</div><!-- /.card-footer -->
|
||
</div>
|
||
<div class="col-md-12">
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<h2 class="card-title">確認合作</h2>
|
||
<div class="custom-control custom-radio mb-1">
|
||
<input type="radio" class="custom-control-input" name="kolProject_isExec" id="rd7" value="Y"> <label class="custom-control-label" for="rd7">是</label>
|
||
|
||
</div>
|
||
<div class="custom-control custom-radio mb-1">
|
||
<input type="radio" class="custom-control-input" name="kolProject_isExec" id="rd8" value="N" checked> <label class="custom-control-label" for="rd8">否</label>
|
||
<div class="custom-control-hint mt-1">
|
||
<input id="kolProject_noExecReason" type="text" class="form-control" placeholder="原因(選填)">
|
||
</div>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
<div class="card-footer"> </div>
|
||
</div>
|
||
<div class="col-md-12" id="fileDiv" style="display: none;">
|
||
<h2 class="card-title"> 合約 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="file_table">
|
||
<thead>
|
||
<tr>
|
||
<th> 檔名 </th>
|
||
<th style="display: none;" ></th>
|
||
<th style="width: 20%;"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
<td class="align-middle" style="display: none;"> </td>
|
||
<td class="align-middle text-right">
|
||
<button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
<!-- .card-footer -->
|
||
<div class="card-footer">
|
||
<a href="javascript: void();" id="addFileBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 上傳合約</a>
|
||
</div><!-- /.card-footer -->
|
||
</div>
|
||
<div class="col-md-12" id="isCooperate_div">
|
||
<div class="form-group">
|
||
<h2 class="card-title">評價</h2>
|
||
<div class="custom-control custom-control-inline custom-checkbox">
|
||
<input type="checkbox" name="quility[]" class="custom-control-input" id="ckb1" value="好溝通"> <label class="custom-control-label" for="ckb1">好溝通</label>
|
||
</div>
|
||
<div class="custom-control custom-control-inline custom-checkbox">
|
||
<input type="checkbox" name="quility[]" class="custom-control-input" id="ckb2" value="準時"> <label class="custom-control-label" for="ckb2">準時</label>
|
||
</div>
|
||
<div class="custom-control custom-control-inline custom-checkbox">
|
||
<input type="checkbox" name="quility[]" class="custom-control-input" id="ckb3" value="品質好"> <label class="custom-control-label" for="ckb3">品質好</label>
|
||
</div>
|
||
<div class="custom-control custom-control-inline custom-checkbox">
|
||
<input type="checkbox" name="quility[]" class="custom-control-input" id="ckb4" value="CP質高"> <label class="custom-control-label" for="ckb4">CP質高</label>
|
||
</div>
|
||
<div class="custom-control custom-control-inline custom-checkbox">
|
||
<input type="checkbox" name="quility[]" class="custom-control-input" id="ckb5" value="有雷"> <label class="custom-control-label" for="ckb5">有雷</label>
|
||
</div>
|
||
<div class="custom-control custom-control-inline custom-checkbox">
|
||
<input type="checkbox" name="quility[]" class="custom-control-input" id="ckb6" value="有大雷"> <label class="custom-control-label" for="ckb6">有大雷</label>
|
||
</div>
|
||
<div class="custom-control custom-control-inline custom-checkbox">
|
||
<input type="checkbox" name="quility[]" class="custom-control-input" id="ckb7" value="有遲交狀況"> <label class="custom-control-label" for="ckb7">有遲交狀況</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
<div class="card-footer"> </div>
|
||
</div>
|
||
<div class="col-md-12" id="isCooperate2_div">
|
||
<h2 class="card-title"> 上刊連結 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="link_table">
|
||
<thead>
|
||
<tr>
|
||
|
||
<th> 連結 </th>
|
||
<th style="width: 20%;"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
<td class="align-middle text-right">
|
||
<button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
<!-- .card-footer -->
|
||
<div class="card-footer">
|
||
<a href="javascript: void();" id="addLinkBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增上刊連結</a>
|
||
</div><!-- /.card-footer -->
|
||
</div>
|
||
<div class="col-md-12" id="isCooperate3_div">
|
||
<h2 class="card-title"> 截圖 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="cut_table">
|
||
<thead>
|
||
<tr>
|
||
|
||
<th style ="width: 30%;"> 截圖 </th>
|
||
<th> 說明文字</th>
|
||
<th style="width: 20%;"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
<td class="align-middle text-right">
|
||
<button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
<!-- .card-footer -->
|
||
<div class="card-footer">
|
||
<a href="javascript: void();" id="addCutBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增截圖</a>
|
||
</div><!-- /.card-footer -->
|
||
</div>
|
||
</div><!-- /.form-row -->
|
||
|
||
<div class="col-md-12" >
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<h2 for="lbl3" class="card-title">附註 <span class="badge badge-secondary"><em>選填</em></span></h2>
|
||
<textarea class="form-control" id="kolProject_memo" rows="4" placeholder=""></textarea>
|
||
</div><!-- /.form-group -->
|
||
</div>
|
||
|
||
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" id="kolProjectSaveBtn" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</<div>
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
<!-- .modal -->
|
||
<form id="clientKolProjectMediaPriceEditForm" name="clientKolProjectMediaPriceEditForm">
|
||
<div class="modal fade" id="clientKolProjectMediaPriceEditModal" tabindex="-1" role="dialog" aria-labelledby="clientKolProjectMediaPriceEditFormLabel" data-backdrop="static" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="socialModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">合作形式與報價</span> <input id="optionCooper_name" type="text" class="form-control form-control-lg" value="" placeholder="合作形式與報價" readonly="readonly" required="">
|
||
</h6>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<input type="hidden" id="kolProjectPrice_method" />
|
||
<input type="hidden" id="kolProjectPrice_uid" />
|
||
<input type="hidden" id="kolProjectPrice_optionItem_uid" />
|
||
<input type="hidden" id="kolProjectPrice_mediaItem_uid" />
|
||
<div class="form-group">
|
||
<label for="cnCountry"> 合作平台 </label> <select id="kolProjectMedia_select" class="custom-select d-block w-100">
|
||
|
||
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="cnCountry"> 規格 </label> <select id="kolProjectSpec_select" class="custom-select d-block w-100">
|
||
|
||
|
||
</select>
|
||
</div>
|
||
<!-- .form-group -->
|
||
<div class="form-group" id="kolProjectSpec_other">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolProjectPrice_other" class="form-control" value="" placeholder="合作形式說明" maxlength="45" required=""> <label for="olProjectPrice_other">合作形式說明</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolProjectPrice_num" class="form-control" value="" placeholder="數量" maxlength="6" required=""> <label for="kolProjectPrice_num">數量</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolProjectPrice_cost" class="form-control" value="" placeholder="報價" maxlength="12" required=""> <label for="kolProjectPrice_cost">報價</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<label class="control-label" for="flatpickr01">報價日期</label> <input id="kolProjectPrice_date" type="text" class="form-control" data-toggle="flatpickr" data-date-format="Y/m/d">
|
||
</div><!-- /.form-group -->
|
||
|
||
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" id="kolProjectPriceDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientKolProjectMediaPriceEditModal" >Close</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
<!-- .modal -->
|
||
<form id="clientKolProjectUrlForm" name="clientKolProjectUrlForm">
|
||
<div class="modal fade" id="clientKolProjectUrlModal" tabindex="-1" role="dialog" aria-labelledby="clientKolProjectUrlLabel" data-backdrop="static" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="socialModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">上刊連結</span> <input id="optionCooper_name" type="text" class="form-control form-control-lg" value="" placeholder="上刊連結" readonly="readonly" required="">
|
||
</h6>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<input type="hidden" id="kolProjectUrl_method" />
|
||
<input type="hidden" id="kolProjectUrl_uid" />
|
||
|
||
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolProjectLink_url" class="form-control" value="" placeholder="連結" required=""> <label for="kolProjectLink_url">連結</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="kolProjectLink_text" class="form-control" value="" placeholder="連結名稱" maxlength="45" required=""> <label for="kolProjectLink_text">連結名稱</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
|
||
|
||
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" id="clientKolProjectUrlDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientKolProjectUrlModal">Close</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
|
||
<!-- .modal -->
|
||
<form id="clientCutPhotoForm" name="clientCutPhotoForm">
|
||
<div class="modal fade" id="clientCutPhotoModal" tabindex="-1" role="dialog" aria-labelledby="clientCutPhotoModalLabel" data-backdrop="static" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="socialModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">截圖</span> <input id="optionPhoto_name" type="text" class="form-control form-control-lg" value="" placeholder="截圖" readonly="readonly " required="">
|
||
</h6>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<input type="hidden" id="photo_method" />
|
||
<input type="hidden" id="photo_uid" />
|
||
|
||
<div class="form-group">
|
||
<div class="card-body">
|
||
<!-- .media -->
|
||
<div class="media">
|
||
<div class="user-avatar user-avatar-xxl fileinput-button">
|
||
<div class="fileinput-button-label"> Change photo </div><img src="~/BackEnd/assets/images/avatars/unknown-profile.jpg" alt=""> <input id="fileupload-subPhoto" type="file" accept="image/*" name="subPhoto">
|
||
</div>
|
||
<div class="media-body pl-3">
|
||
<h3 class="card-title"> 輪播圖片 </h3>
|
||
<p class="card-text"> 點擊圖片可更換照片. </p>
|
||
<p class="card-text text-muted"> 最大容許檔案大小為 5MB. </p>
|
||
</div>
|
||
</div><!-- /.media -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<div class="form-label-group">
|
||
<input type="text" id="photo_title" class="form-control" value="" placeholder="圖片說明" maxlength="50" required=""> <label for="photo_title">圖片說明</label>
|
||
</div>
|
||
</div><!-- /.form-group -->
|
||
|
||
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" id="clientCutPhotoSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientCutPhotoModal">Close</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
<!-- .modal -->
|
||
<form id="clientFileForm" name="clientFileForm">
|
||
<div class="modal fade" id="clientFileModal" tabindex="-1" role="dialog" aria-labelledby="clientFileModalLabel" data-backdrop="static" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="socialModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">合約檔案</span> <input id="optionPhoto_name" type="text" class="form-control form-control-lg" value="" placeholder="合約檔案" readonly="readonly " required="">
|
||
</h6>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<input type="hidden" id="file_method" />
|
||
<input type="hidden" id="file_uid" />
|
||
<input type="hidden" id="origin_fileName" />
|
||
<input type="hidden" id="upload_fileName" />
|
||
<div class="form-group">
|
||
<div class="card-body">
|
||
<!-- .media -->
|
||
<div class="media" >
|
||
<div class="user-avatar user-avatar-md fileinput-button" id="file_div">
|
||
<div class="fileinput-button-label"> 上傳 </div><img src="~/assets/images/upload-file.jpg" alt=""> <input id="fileupload-uploadFile" type="file" name="uploadFile">
|
||
|
||
</div>
|
||
|
||
|
||
</div><!-- /.media -->
|
||
<br></br>
|
||
<div>
|
||
<p class="card-text text-muted"> 最大容許檔案大小為 50MB. </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" id="clientFileSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientFileModal">Close</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
|
||
<!-- .modal -->
|
||
<form id="clientPreivewForm" name="clientPreviewForm">
|
||
<div class="modal fade" id="clientPreviewModal" tabindex="-1" role="dialog" aria-labelledby="clientPreviewModalLabel" data-backdrop="static" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog modal-lg" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="socialModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">KOL Profile</span> <input id="previewKol_name1" type="text" class="form-control form-control-lg" value="" placeholder="KOL Profile" readonly="readonly " required="">
|
||
</h6>
|
||
<button type="button" class="close" data-dismiss="modal">
|
||
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||
</button>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input02" class="col-md-3">KOL 名稱</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<input type="text" class="form-control" id="previewKol_name" value="" readonly="readonly">
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input03" class="col-md-3">KOL 介紹</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<textarea class="form-control" id="previewKol_descript" readonly="readonly"></textarea>
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input04" class="col-md-3">聯繫方式</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<div class="">
|
||
<label id="previewKol_contact">Yes, hire me</label>
|
||
</div>
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input04" class="col-md-3">KOL 成員</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<div class="">
|
||
<label id="previewKol_member">Yes, hire me</label>
|
||
</div>
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input04" class="col-md-3">KOL 類型</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<div class="">
|
||
<label id="previewKol_type">Yes, hire me</label>
|
||
</div>
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input04" class="col-md-3">粉絲輪廓</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<div class="">
|
||
<label id="previewKol_fans">Yes, hire me</label>
|
||
</div>
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input04" class="col-md-3">粉絲男女比</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<div class="">
|
||
<label id="previewKol_sexualRatio">Yes, hire me</label>
|
||
</div>
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="section-block">
|
||
<h6 class="section-title"> 年齡層占比 </h6><!-- metric row -->
|
||
<div class="metric-row">
|
||
<!-- metric column -->
|
||
<div class="col-12 col-sm-6 col-lg-3">
|
||
<!-- .metric -->
|
||
<div class="card-metric">
|
||
<div class="metric">
|
||
<p class="metric-value h4">
|
||
<span class="value" id="13to17"></span>
|
||
</p>
|
||
<h2 class="metric-label"> 13-17歲占比 </h2>
|
||
</div>
|
||
</div><!-- /.metric -->
|
||
</div><!-- /metric column -->
|
||
<!-- metric column -->
|
||
<div class="col-12 col-sm-6 col-lg-3">
|
||
<!-- .metric -->
|
||
<div class="card-metric">
|
||
<div class="metric">
|
||
<p class="metric-value h4">
|
||
<span class="value" id="18to24"></span>
|
||
</p>
|
||
<h2 class="metric-label"> 18-24歲占比 </h2>
|
||
</div>
|
||
</div><!-- /.metric -->
|
||
</div><!-- /metric column -->
|
||
<!-- metric column -->
|
||
<div class="col-12 col-sm-6 col-lg-3">
|
||
<!-- .metric -->
|
||
<div class="card-metric">
|
||
<div class="metric">
|
||
<p class="metric-value h4">
|
||
<span class="value" id="25to34"></span>
|
||
</p>
|
||
<h2 class="metric-label"> 25-34歲占比 </h2>
|
||
</div>
|
||
</div><!-- /.metric -->
|
||
</div><!-- /metric column -->
|
||
<!-- metric column -->
|
||
<div class="col-12 col-sm-6 col-lg-3">
|
||
<!-- .metric -->
|
||
<div class="card-metric">
|
||
<div class="metric">
|
||
<p class="metric-value h4">
|
||
<span class="value" id="35to44"></span>
|
||
</p>
|
||
<h2 class="metric-label"> 35-44歲占比 </h2>
|
||
</div>
|
||
</div><!-- /.metric -->
|
||
</div><!-- /metric column -->
|
||
<!-- metric column -->
|
||
<div class="col-12 col-sm-6 col-lg-3">
|
||
<!-- .metric -->
|
||
<div class="card-metric">
|
||
<div class="metric">
|
||
<p class="metric-value h4">
|
||
<span class="value" id="45to54"></span>
|
||
</p>
|
||
<h2 class="metric-label"> 45-54歲占比 </h2>
|
||
</div>
|
||
</div><!-- /.metric -->
|
||
</div><!-- /metric column -->
|
||
<!-- metric column -->
|
||
<div class="col-12 col-sm-6 col-lg-3">
|
||
<!-- .metric -->
|
||
<div class="card-metric">
|
||
<div class="metric">
|
||
<p class="metric-value h4">
|
||
<span class="value" id="55to64"></span>
|
||
</p>
|
||
<h2 class="metric-label"> 55-64歲占比 </h2>
|
||
</div>
|
||
</div><!-- /.metric -->
|
||
</div><!-- /metric column -->
|
||
<!-- metric column -->
|
||
<div class="col-12 col-sm-6 col-lg-3">
|
||
<!-- .metric -->
|
||
<div class="card-metric">
|
||
<div class="metric">
|
||
<p class="metric-value h4">
|
||
<span class="value" id="64up"></span>
|
||
</p>
|
||
<h2 class="metric-label"> 65歲以上占比 </h2>
|
||
</div>
|
||
</div><!-- /.metric -->
|
||
</div><!-- /metric column -->
|
||
</div><!-- /metric row -->
|
||
</div>
|
||
<div class="col-md-12">
|
||
<!-- .card-body -->
|
||
<div class="card-body">
|
||
<h4 class="card-title"> 社群平台 </h4><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="preview_media_table">
|
||
<thead>
|
||
<tr>
|
||
<th> 平台 </th>
|
||
<th> 網址 </th>
|
||
<th> 粉絲數</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> Instagram </td>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
<td class="align-middle"> 754000 </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
</div><!-- /.card-body -->
|
||
|
||
</div>
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input04" class="col-md-3">合作過類型</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<div class="">
|
||
<label id="previewKol_tags">Yes, hire me</label>
|
||
</div>
|
||
</div><!-- /form column -->
|
||
</div>
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientPreviewModal">Close</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal -->
|
||
|
||
<!-- .modal -->
|
||
<form id="clientCasePreivewForm" name="clientCasePreviewForm">
|
||
<div class="modal fade" id="clientCasePreviewModal" tabindex="-1" role="dialog" aria-labelledby="clientCasePreviewModalLabel" data-backdrop="static" aria-hidden="true">
|
||
<!-- .modal-dialog -->
|
||
<div class="modal-dialog modal-lg" role="document">
|
||
<!-- .modal-content -->
|
||
<div class="modal-content">
|
||
<!-- .modal-header -->
|
||
<div class="modal-header">
|
||
<h6 id="socialModalLabel" class="modal-title inline-editable">
|
||
<span class="sr-only">合作項目</span> <input id="previewKol_name1" type="text" class="form-control form-control-lg" value="" placeholder="合作項目" readonly="readonly " required="">
|
||
</h6>
|
||
<button type="button" class="close" data-dismiss="modal">
|
||
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||
</button>
|
||
</div><!-- /.modal-header -->
|
||
<!-- .modal-body -->
|
||
<div class="modal-body">
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input02" class="col-md-3">案件名稱</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<input type="text" class="form-control" id="previewProject_name" value="" readonly="readonly">
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<!-- form column -->
|
||
<label for="input03" class="col-md-3">合作形式</label> <!-- /form column -->
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<input type="text" class="form-control" id="previewProject_Cooper" readonly="readonly"></input>
|
||
</div><!-- /form column -->
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<h2 class="card-title"> 報價 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="previewPrice_table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 10%;"> 合作平台 </th>
|
||
<th style="width: 30%;"> 規格 </th>
|
||
<th style="width: 10%; text-align: right;"> 數量 </th>
|
||
<th style="width: 10%; text-align: right;"> 報價 </th>
|
||
<th> 報價日期</th>
|
||
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> Instagram </td>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
<td class="align-middle"> zamy_ding </td>
|
||
<td class="align-middle"> 奎丁 </td>
|
||
<td class="align-middle"> 754000 </td>
|
||
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
|
||
</div>
|
||
<div class="col-md-12">
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<h2 class="card-title">確認合作</h2>
|
||
<div class="col-md-9 mb-3">
|
||
<input type="text" class="form-control" id="previewProject_isCooper" readonly="readonly"></input>
|
||
</div><!-- /form column -->
|
||
</div><!-- /.form-group -->
|
||
<div class="card-footer"> </div>
|
||
</div>
|
||
<div class="col-md-12" id="fileDiv" style="display: none;">
|
||
<h2 class="card-title"> 合約 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="previewFile_table">
|
||
<thead>
|
||
<tr>
|
||
<th> 檔名 </th>
|
||
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
|
||
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
|
||
</div>
|
||
<div class="col-md-12" id="isCooperate_div">
|
||
<div class="form-group">
|
||
<h2 class="card-title">評價</h2>
|
||
<!-- form column -->
|
||
<div class="col-md-9 mb-3">
|
||
<input type="text" class="form-control" id="previewProject_Quality" readonly="readonly"></input>
|
||
</div><!-- /form column -->
|
||
</div><!-- /.form-group -->
|
||
<div class="card-footer"> </div>
|
||
</div>
|
||
<div class="col-md-12" id="isCooperate2_div">
|
||
<h2 class="card-title"> 上刊連結 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="previewLink_table">
|
||
<thead>
|
||
<tr>
|
||
|
||
<th> 連結 </th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
|
||
</div>
|
||
<div class="col-md-12" id="isCooperate3_div">
|
||
<h2 class="card-title"> 截圖 </h2><!-- .table-responsive -->
|
||
<div class="table-responsive">
|
||
<table class="table table-hover" style="min-width: 678px" id="previewCut_table">
|
||
<thead>
|
||
<tr>
|
||
|
||
<th style="width: 30%;"> 截圖 </th>
|
||
<th> 說明文字</th>
|
||
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
|
||
<td class="align-middle ">
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /.table-responsive -->
|
||
|
||
</div>
|
||
<div class="col-md-12" >
|
||
<!-- .form-group -->
|
||
<div class="form-group">
|
||
<h2 for="lbl3" class="card-title">附註 <span class="badge badge-secondary"><em>選填</em></span></h2>
|
||
<textarea class="form-control" id="previewkolProject_memo" rows="4" placeholder=""></textarea>
|
||
</div><!-- /.form-group -->
|
||
</div>
|
||
</div><!-- /.modal-body -->
|
||
<!-- .modal-footer -->
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientCasePreviewModal">Close</button>
|
||
</div><!-- /.modal-footer -->
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal-dialog -->
|
||
</div>
|
||
</form><!-- /.modal --> |