File: /var/www/dk/wp-content/themes/food/food-admin/page-food-instructions.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x5-fullscreen" content="true">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta content="telephone=no" name="format-detection"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="full-screen" content="yes">
<title>instructions</title>
<meta name="description" content="">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/food-app/css/antd.min.css">
<script src="<?php bloginfo('template_directory'); ?>/food-app/js/vue.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/food-app/js/antd.min.js"></script>
</head>
<body>
<style>
body {
background-color: #cccccc;
padding-top: 20px;
padding-right: 20px;
}
.update-nag, #wpfooter {
display: none;
}
.ant-anchor {
background-color: #FFFFFF;
}
</style>
<div id="app">
<div class="ant-anchor">
<div class="ant-anchor-ink"><span class="ant-anchor-ink-ball" style="top: 10.5px;"></span></div>
<div class="ant-anchor-link"><a href="#1" title="商品 設置"
class="ant-anchor-link-title">1、商品 設置</a></div>
<div class="ant-anchor-link"><a href="#4" title="Banner 設置"
class="ant-anchor-link-title">2、Banner 設置</a></div>
<div class="ant-anchor-link"><a href="#6"
class="ant-anchor-link-title">3、比赛 設置</a></div>
</div>
<a-list item-layout="horizontal" :data-source="columns">
<a-list-item slot="renderItem" slot-scope="item, index">
<a-card v-if="item.isStart" :title="item.title" :id="item.id" :key="item.id"></a-card>
<a-card v-else :title="item.description" :key="item.id">
<img slot="cover" :src="item.url"/>
</a-card>
</a-list-item>
</a-list>
<!-- <a-card hoverable style="width: 100%" :id="item.id">-->
<!-- <a-card-meta :title="item.title">-->
<!-- <template slot="description">-->
<!-- {{ item.description }}-->
<!-- </template>-->
<!-- </a-card-meta>-->
<!---->
<!-- <img slot="cover" :src="item.url"/>-->
<!-- </a-card>-->
</div>
<script>
const columns = [
{
id: '1',
title: '商品 設置',
isStart: true
},
{
id: '2',
title: '商品 設置',
url: 'http://dk.smart1space.site/wp-content/uploads/2023/06/QQ截图20230608154802.png',
description: '1、選擇商品類型，點擊添加商品，填寫商品信息，點擊保存即可。'
},
{
id: '3',
title: '商品 設置',
url: 'http://dk.smart1space.site/wp-content/uploads/2023/06/QQ截图20230609103839.png',
description: '2、填寫商品價格、選擇商品圖片'
},
{
id: '4',
title: 'Banner 設置',
isStart: true
}, {
id: '5',
title: 'Banner 設置',
url: 'http://dk.smart1space.site/wp-content/uploads/2023/06/QQ截图20230608163611.png',
description: '1、選擇Banner，搜索已上傳圖片名稱選擇圖片、填寫Banner類型，填寫Banner鏈接 點擊保存即可。',
},
{
id: '6',
title: '比赛 設置',
isStart: true
},
{
id: '7',
title: '比赛 設置',
url: 'http://dk.smart1space.site/wp-content/uploads/2023/11/微信图片_20231102142055.png',
description: '登錄管理員賬號後，點擊banner右上角頭像，進入個人管理頁面。比賽管理，可以新增比賽'
},
{
id: '8',
url: 'http://dk.smart1space.site/wp-content/uploads/2023/11/微信图片_20231102142103.png',
description: '普通用戶可以在比賽頁面投稿，上傳視頻，參加比賽'
},
];
new Vue({
el: "#app",
created() {
},
data: {
columns,
},
methods: {}
})
</script>
</body>
</html>