网站商城列表化改造

发表于站长交流区版块

网站商城原始模板，电脑显示还行，手机版单个商品信息拉的太长，改成表格样式，需要的拿去用吧。

改之前先备份好原模板文件，留着备用。

需要修改两个文件：/app/puyuetian_myshop/template 文件夹下 list.hst、main.hst

list.hs复制以下代码全部替换

<table class="pk-table pk-table-bordered pk-width-all">
	<tbody>
        <colgroup span="1" width="20%" ></colgroup>
        <colgroup span="1" width="60%" ></colgroup>
        <colgroup span="1" width="20%" ></colgroup>
		<tr>
			<td rowspan="4" style="text-align:center;"><a href="{$_G['TEMP']['LISTDATA']['gourl']}"><img src="{$_G['TEMP']['LISTDATA']['imgs']}" width="100px"></a></td>
		</tr>
		
		<tr>
		<td style="text-align:center;">{$_G['TEMP']['LISTDATA']['title']}</td>
		<td style="text-align:center;">{$_G['TEMP']['LABEL_HTML']}</td>
		</tr>
		
		<tr>
		<td style="text-align:center;">剩余名额</td>
		 <td style="text-align:center;">{$_G['TEMP']['LISTDATA']['kucun']}</td>
		</tr>
		
		<tr>
		<td style="text-align:center;">{$_G['TEMP']['LISTDATA']['shoujia']}{htmlspecialchars($_G['TEMP']['LISTDATA']['jylx']=='jifen'?$_G['SET']['JIFENNAME']:$_G['SET']['TIANDOUNAME'])}</td>
		<td rowspan="4" style="text-align:center;"><a target="_blank" class="pk-btn pk-btn-warning" href="index.php?c=app&a=puyuetian_myshop:index&s=detail&id={$_G['TEMP']['LISTDATA']['id']}#clickbuybtn">办办</a>{$_G['TEMP']['ADMINEDIT']}</td>
		</tr>
	</tbody>
</table>

main.hst复制以下代码全部替换

<link rel="stylesheet" href="app/puyuetian_myshop/template/css/main.css" />
<div class="pk-container">
	<div class="pk-background-color-white">
	<table class="pk-table pk-table-bordered pk-width-all">

	<thead>
		<tr>
			<th style="text-align:center;"><a href="index.php?c=app&a=puyuetian_myshop:index" title="院系分配">{$_G['SET']['APP_PUYUETIAN_MYSHOP_TITLE']}首页</a></th>
        <th style="text-align:center;"><a class="pk-hover-underline" target="_blank" href="index.php?c=app&a=puyuetian_myshop:index&s=delivergoods">我的已办业务</a></th>
		<th style="text-align:center;"><i class="fa fa-cog fa-spin"></i>{$_G['TEMP']['ADMINADD']}</th>
		
		</tr>
	</thead>
	</table>
		<div class="pk-row">
			{$_G['TEMP']['HTML']}
		</div>
	</div>
</div>

相应的文字说明改成自己的，行和列的宽度自己试着改，合适为止

2023-07-11 06:58

评论列表评论

擎天论坛六级站长普通 4#

@100913:(在3#的简单就是美) 自适应的

共0条回复,点击查看回复

2023-07-13

简单就是美八级站长 VIP 3#

不错啊，自适应电脑，手机就完美了

共0条回复,点击查看回复

2023-07-12

ChatGPT 资深站长机器人 2#

hop/templates/goods_list.html 和 /app/puyuetian_mys/shop/templates/goods_detail.html。首先，备份好原模板文件，以防止修改出错后无法恢复。然后，打开 /app/puyuetian_mys/shop/templates/goods_list.html 文件，找到商品列表的部分代码，将其改成表格样式。可以参考以下示例代码： ```html <table> <thead> <tr> <th>商品名称</th> <th>价格</th> <th>库存</th> <th>操作</th> </tr> </thead> <tbody> {% for goods in goods_list %} <tr> <td>{{ goods.name }}</td> <td>{{ goods.price }}</td> <td>{{ goods.stock }}</td> <td> <a href="/goods/{{ goods.id }}">查看详情</a> </td> </tr> {% endfor %} </tbody> </table> ``` 保存并关闭文件。接下来，打开 /app/puyuetian_mys/shop/templates/goods_detail.html 文件，找到商品详情的部分代码，将其改成表格样式。可以参考以下示例代码： ```html <table> <tbody> <tr> <td>商品名称</td> <td>{{ goods.name }}</td> </tr> <tr> <td>价格</td> <td>{{ goods.price }}</td> </tr> <tr> <td>库存</td> <td>{{ goods.stock }}</td> </tr> <tr> <td>描述</td> <td>{{ goods.description }}</td> </tr> </tbody> </table> ``` 保存并关闭文件。完成以上修改后，重新启动网站商城，查看商品列表和商品详情页面是否已经改成了表格样式。如有需要，可以根据实际情况进行进一步的调整和美化。

共0条回复,点击查看回复

2023-07-11

加载更多